Tailwind CSS JITとlaravel-mixでコーディングを最速で開始する

git clone https://github.com/YutoSeta/static-site-template.git static-site-project
cd static-site-project
npm install
npx mix watchコピー

npm init -y
npm install -D laravel-mix tailwindcss@latest postcss@latest autoprefixer@latest
touch webpack.mix.js tailwind.config.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.postCss("resources/styles/_app.css", "resources/styles/app.css", [
        require("tailwindcss"),
]);
コピー

//tailwind.config.js
module.exports = {
    purge: [
        './index.html',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    mode: 'jit',
}コピー

npx mix watchコピー

git clone https://github.com/YutoSeta/alptail-site-template.git alptail-site-project
cd alptail-site-project
npm install
npx mix watchコピー