$ laravel new laravel-x-tailwindcss
or
$ composer create-project --prefer-dist laravel/laravel laravel-x-tailwindcss

$ # プロジェクト作成後は、プロジェクトルートに移動しましょう
$ cd laravel-x-tailwindcss

package.json修正＆インストール

package.json修正

package.jsonから不要なライブラリを削除します。
devDependenciesの部分を以下のように変更してください。

{
   ・・・
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17"
    }
}

↓

{
   ・・・
    "devDependencies": {
        "cross-env": "^5.1",
        "laravel-mix": "^4.0.7",
    }
}

laravel-mixは利用するので最低限必要なもののみ残します。
Tailwind CSSは別途インストールします。

初期ライブラリのインストール

■ npmを利用する場合

$ npm install

■ yarnを利用する場合

$ yarn

Tailwind CSSインストール

■ npmを利用する場合

$ npm install tailwindcss --save-dev

■ yarnを利用する場合

$ yarn add tailwindcss --dev

Tailwind CSSの初期設定

Tailwind CSSの設定ファイルを生成します。公式ドキュメントのこちらの内容になります。

$ ./node_modules/.bin/tailwind init

プロジェクトルートに tailwind.js が生成されます。
tailwind.js というファイル名がデフォルトになります。変更したい方は、

$ ./node_modules/.bin/tailwind init [filename]

のようにファイル名を指定してください。
ファイルの内容は今回変更しません。生成されたファイルをご確認ください。

静的ファイル（js, css）を作成

Tailwind CSSは PostCSS で作成されています。Laraveはデフォルトでsassを利用するようになっていますが、今回はPlain CSSで記述するように修正します。

sassディレクトリの削除

sassディレクトリ配下のリソースは利用しないので削除します。

$ rm -rf resources/sass

cssディレクトリとメインとなるCSSファイルを作成

メインとなるCSSファイルは、今回はapp.cssとします。公式ドキュメントのこちらの内容になります。

$ mkdir -p resources/css/
$ vi resources/css/app.css

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/preflight";
 */
@tailwind preflight;

/**
 * This injects any component classes registered by plugins.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/components";
 */
@tailwind components;

/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "components/buttons";
 * @import "components/forms";
 */

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/utilities";
 */
@tailwind utilities;

/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */

jsファイルを用意する

デフォルトで用意されている resources/js 配下のjsは不要です。一度削除してから新たに app.js を用意します。

$ rm -rf resources/js/*
$ touch resources/js/app.js

laravel-mix のbuild設定を変更

PostCSSを利用してTailwind CSSをbuildする為、webpack.mix.jsの設定を変更します。

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
   tailwindcss('./tailwind.js'),
]);

静的ファイルをbuild

■ npmを利用する場合

$ npm run dev

■ yarnを利用する場合

$ yarn dev

welcomeページを変更して試してみる

Tailwind CSSでSticky Footerを実装する方法で作成したhtmlを利用してTailwind CSSのスタイルが適応されるか確認する為、以下のようにhtmlを変更します。

Tailwind CSSでSticky Footerを実装する方法

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>

        {{-- Scripts --}}
        <script src="{{ asset('js/app.js') }}" defer></script>

        {{-- Styles --}}
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">

        {{-- Icon --}}
        <link rel="icon" href="{{ asset('favicon.ico') }}">

    </head>
    <body>
        <div class="min-h-screen flex flex-col font-sans">
            <header class="flex items-center justify-between flex-wrap bg-teal p-6">
                <div class="flex items-center flex-no-shrink text-white mr-6">
                <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
                </div>
            </header>
            <div class="flex-grow p-8 text-2xl">
                Contents
            </div>
            <footer class="bg-grey-darkest text-white p-6">
                Footer - Made with <a href="https://tailwindcss.com/" target="_blank" class="text-white hover:text-grey">Tailwind CSS</a>
            </footer>
        </div>
    </body>
</html>