Tailwindの設定

by

CSSとして推奨されているtailwindは初めから使えるわけではありません。

インストールして使えるようにしないといけない。

インストールにはNode.jsが必要です。事前にNode.jsを入れておく。

(--jet でjet streamを入れた場合はそのまま使用できます。）

インストール

npm（Node Package Manager）を使ってTailwindをインストール。

よくわからないけど、対象のディレクトリに移動してこの通り実行しました。

　npm install
　npm install -D tailwindcss
　npx tailwindcss init

config.jsの編集

/resources/views/vendor/pagination/tailwind.config.jsを編集せよ、とネットにあったけど、
プロジェクト直下にtailwind.config.jsがあったのでそれを編集。

module.exports = {
    purge: [
    './storage/framework/views/*.php',
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
    extend: {},
    },
    variants: {
    extend: {},
    },
    plugins: [],
    }

app.cssの編集

resources/css/app.cssを編集。このファイルはよく使うcssの登録にも使います。
これもよくわからないけど、コピペ。

　@tailwind base;
　@tailwind components;
　@tailwind utilities;

webpack.mix.jsの編集

プロジェクト直下のwebpack.mix.jsの編集。
全くわからないけどコピペ。

const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
]);

CSSのリンク

普通に、リンクを変更する。viewでレイアウトを使うのが普通なので、ヘッダー部分に入れておけばよい。


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

ビルド

　npm run dev

ビルドは、最初の１回だけかと思ったけど、そうではなかった。
とりあえずこれでtailwind仕様で動作しました。