Vueは友達
ホーム
>
Laravel
>
Laravel-mixにTailwind CSSを導入する方法

Laravel-mixにTailwind CSSを導入する方法

Laravel-mixにTailwind CSSを導入する方法

10 回閲覧されました

みなさんこんにちは、jonioです。

今回はLaravel-mixにTailwind CSSを導入する方法のメモの記事になります。

Laravelのバージョン

8系と10系で動作の確認をしています。

Tailwind CSSの導入

下記のコマンドを叩きます。

npm install -D tailwindcss postcss autoprefixer

Laravelのプロジェクト直下に「tailwind.config.js」を作成して下記の記述をします。

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

/** @type {import('tailwindcss').Config} */
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],
};

6行目の「content」の項目にはTailwind CSSに該当するCSSのクラス名が適用されるファイルが何かを記述します。

例えば9行目はTailwind CSSを適用するテンプレートを指定しています。

「/**/*.blade.php」の「**」は任意のフォルダという意味で「*」は任意のテンプレートという意味です。

app.cssに記述

「Laravelのプロジェクト > resources > css > app.css」にTailwind CSSを適用する為に下記の記述をします。

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

webpack.mix.jsに記述

下記の記述をします。

let mix = require('laravel-mix');

mix.postCss('resources/css/app.css', 'public/css', [
    require('tailwindcss'),
])
.version();

resources > css > app.cssをpublic > css > app.cssに変換

下記のコマンドを叩きます。

npm run dev

テンプレートでTailwind CSSを適用

テンプレートに例えば下記の記述をします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS in Laravel Mix</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">     //この行が必要
</head>
<body class="bg-gray-100 text-center">
    <h1 class="text-3xl font-bold text-blue-600">Hello, Tailwind CSS with Laravel Mix! 🎉</h1>
</body>
</html>

「public > css > app.css」にTailwind CSSのクラス名が記載されているのですがそれを使う為に7行目の記述が必要になります。

これでTailwind CSSを導入できます。

カスタムCSS

CSSフレームワークにBootStrapがありますがBootStrapは自分で設定したCSSを用意することができませんがTailwind CSSでは利用できます。

tailwind.config.jsに下記の記述をします。

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

/** @type {import('tailwindcss').Config} */
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],
            },
            colors: {
                'brand-blue' : '#1e40af'
            },
            fontSize: {
                'xxs': '0.65rem'
            },
            //ここまで追加


        },
    },

    plugins: [forms],
};

13行目の「extend」の項目にクラス名を記載すればいいです。

例えば21行目の「brand-blue」や24行目の「xxs」です。

テンプレートに適用する時は例えば下記の記述をします。

class="text-xxs"

そして下記のコマンドを叩きます。

npm run dev（npm run watch）

これでカスタムCSSが適用されます。