Tailwind CSS 整合 Laravel 常用設定

安裝及初始化

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init

推薦的插件

npm install @tailwindcss/line-clamp

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

module.exports = {
    mode: 'jit',
    purge: [         './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/**/*.scss',
        './resources/css/app.scss',
    ],

    theme: {
        colors: {
            transparent: 'transparent',
            current: 'currentColor',
            black: colors.black,
            white: colors.white,
            gray: colors.gray,
            teal: colors.teal,
            //etc.....
        },
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography'),require('@tailwindcss/line-clamp'),],
};

整合tailwindcss 的基本 webpack.mix.js

//webpack.mix.js
  mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
     require("tailwindcss"),
    ]);

同步整合SCSS 的webpack.mix.js

這個demo加入了後台 admin 的css目錄監控作參考

//webpack.mix.js

 mix.js('resources/js/app.js', 'public/js')
 .sass('resources/css/app.scss', 'public/css', {}, [
    require("tailwindcss"),
  ])
  .sass('resources/views/admin/css/app.scss', 'public/admin/css', {});
if (mix.inProduction()) {
    mix.version();
}

update: 如果是Laravel 9 + Vite, 請考這篇我的工作記錄: https://skychoy.com/posts/96-laravel-9-vite-tailwindcss-install-workflow