Webpack, Tailwind, PostCSS for Craft CMS (and others)

gistfile1.txt

In project folder:

npm install --global yarn

yarn add webpack webpack-cli

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest babel-loader @babel/core @babel/preset-env core-js css-loader postcss-loader autoprefixer mini-css-extract-plugin

add node_modules to .gitignore

In webpack.config.js in project root with the following content:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: [
        path.resolve('src', 'app.js'),
        path.resolve('src', 'styles.css'),
    ],
    output: {
        path: path.resolve('web', 'assets'),
        filename: 'app.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                ],
            },
            {
                test: /\.(png|svg|jpe?g|gif)$/,
                include: /images/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/',
                            publicPath: 'images/'
                        }
                    }
                ]
            },              
        ],
    },
    plugins: [new MiniCssExtractPlugin()],
};

In package.json, add

"scripts": {
    "dev": "webpack --mode=development",
    "watch": "webpack --mode=development --watch",
    "build": "webpack --mode=production"
  },

and

"browserslist": "> 1%",

Create a new file named .babelrc in the project root and add the following content:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "corejs": 3,
                "useBuiltIns": "usage"
            }
        ]
    ]
}

Create a new file named postcss.config.js in the project root and add the following:

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('postcss-nested'),
        require('autoprefixer'),
    ],
};
  

This should pay attention to any tailwind.config.js file you have in your project root

Create a file named main.css in your src folder and add the following content:

/* purgecss start ignore */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
/* purgecss end ignore */
@import 'tailwindcss/utilities';

Ensure there is a file, even if it’s empty, named app.js in your src folder.

Ensure there is no tailwind.config.js file in your project root (take a backup if there is one already and you’ve made changes to it!!) and run:

npx tailwind init --full 

Run yarn dev to compile assets with no optimisation
Run yarn build to compile for production with purging
Run yarn watch to have it rebuild after any changes to your main.css or app.js files (Ctrl+C to stop)