Sail環境でのTailWind導入

Sail環境で新規に追加したTailWindが反映されなかった時の対処について

TailWindとは

オープンソースのCSSフレームワークで、Bootstrapなどの他のCSSフレームワークとは異なり定義済みクラスを提供しないのが特徴。
代わりに、ユーティリティCSSクラスを提供するので、これを組み合わせて要素をスタイリングする。

Tailwind CSSの導入

インストール

Sailを立ち上げている状態でコマンド実行

sail npm install -D tailwindcss postcss autoprefixer

sailコマンドで以下をインストールするコマンド

• Tailwind CSS
• PostCSS
• Autoprefixer

初期設定

Tailwind CSSの初期設定ファイルを生成

sail npx tailwindcss init -p

• npx　npmリポジトリからパッケージを一時に実行する
• init　初期設定ファイルを生成
• -p　プリセットのオプション

作成されたtailwind.config.jsとresources/css/app.cssファイルにそれぞれへ、以下を記述

tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms],
};

• content: Tailwind CSSが解析するCSSファイルのパスを指定。blade.php 拡張子を持つBladeファイルや、.php 拡張子を持つLaravelのビューファイルなどが指定される

resources/css/app.css

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

• @tailwind base; ベーススタイルを適用する指示で、ブラウザのデフォルトスタイルをリセットし、基本的なHTML要素に対して一貫性のあるスタイルを適用
• @tailwind components; コンポーネントスタイルを適用する指示で、再利用可能なコンポーネントのスタイルがプロジェクトに適用
• @tailwind utilities; ユーティリティクラスを適用する指示で、テキストスタイル、マージン、パディング、色などの簡潔なクラスが使用できるようになる

実行

sail npm run dev

開発用のサーバーが起動するのでTailWindを追加で記述しても反映され始める。