Help us understand the problem. What is going on with this article?

Laravel8 tailwindをsassで使う【備忘録】


1. npmを使ってtailwindのインストール

※確かJetStreamをインストールすると一緒についてくるので不要な場合スキップ
※dockerを使用してる場合は適切なコンテナの中でnpmコマンドを使うこと(ローカルで叩いたり、間違ったコンテナで叩いてハマったので)

$ npm install tailwindcss

2. 設定用ファイルを作成

$ npx tailwind init

プロジェクトのルートディレクトリにtailwind.config.jsが出来上がる

tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    purge: [
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

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

    variants: {
        extend: {
            opacity: ['disabled'],
        },
    },

    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

3. webpack.mix.jsを編集

tailwind.config.js
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');//追記



mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({ 
        processCssUrls: false, //公式ドキュメント参照
        postCss: [ tailwindcss('./tailwind.config.js') ], 
    }); 

    // JetStreamインストール時に生成されてた書き換え前の内容
    //
    // .postCss('resources/css/app.css', 'public/css', [
    //     require('postcss-import'),
    //     require('tailwindcss'),
    //     require('autoprefixer'),
    // ])

if (mix.inProduction()) {
    mix.version();
}


4. resource/sass/app.scssを編集(追加)

app.scss
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

5. ビルドする

//変更をリアルタイムに表示
$ npm run watch

//押すたび変更を表示
$ npm run dev

かなり端折った+今の所動いてるしあってるよね?レベルの備忘録なので公式ドキュメント要参照


参考

公式ドキュメント
https://tailwindcss.com/
公式ドキュメント(日本語)
https://tailwindcss-ja.entap.app/


inbchov
元地方ゼネコンの営業、稼業も継がずにプログラマとして働くべくphpとLaravelを勉強中。 ゲームと車と筋トレが好き。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away