TailwinCSS + Django setup sample config files

package.json

{
  "name": "my_project",
  "version": "0.1.0",
  "dependencies": {
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.1",
  },
  "devDependencies": {
    "autoprefixer": "^10.2.4",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^7.0.0",
    "css-loader": "^5.0.2",
    "dotenv-webpack": "^6.0.0",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^1.3.6",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.6",
    "postcss-loader": "^5.0.0",
    "purgecss-webpack-plugin": "^4.0.0",
    "sass-loader": "^11.0.1",
    "tailwindcss": "^2.0.3",
    "webpack": "^5.19.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.11.2"
  },
  "engines": {
    "node": ">=12"
  },
  "browserslist": [
    "last 2 versions"
  ],
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  }
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

webpack.config.js

const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
const path = require('path');

const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

const isDevMode = process.env.WEBPACK_MODE === 'development'

const exclusions = /node_modules/;


module.exports = {
    watch: isDevMode,
    entry: {
        app: "./frontend/js/app.js",
    },
    output: {
        path: path.resolve(__dirname, "book_drips/static"), // Should be in STATICFILES_DIRS
        publicPath: "/static/", // Should match Django STATIC_URL
        filename: "js/[name].js", // No filename hashing, Django takes care of this
        chunkFilename: "[id]-[chunkhash].js", // DO have Webpack hash chunk filename, see below
    },
    devServer: {
        writeToDisk: true, // Write files to disk in dev mode, so Django can serve the assets
        port: 8081,
        open: false
    },
    module: {
        rules: [
            {
                test: /.*/,
                include: path.resolve(__dirname, "frontend/images"),
                exclude: exclusions,
                options: {
                    context: path.resolve(__dirname, "frontend/"),
                    name: "[path][name].[ext]",
                },
                loader: "file-loader",
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                include: path.resolve(__dirname, "frontend/fonts"),
                options: {
                    context: path.resolve(__dirname, "frontend/"),
                    outputPath: 'fonts/'
                },
                loader: "file-loader",
            },
            {
                test: /\.s?css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
            }
        ]

    },
    plugins: [
        new Dotenv({
            systemvars: true
        }),
        new CleanWebpackPlugin({cleanStaleWebpackAssets: false}),
        new MiniCssExtractPlugin({
            filename: "css/[name].css",
            chunkFilename: "css/[id].css"
        }),
        new CopyWebpackPlugin({
            patterns: [
                {from: 'frontend/images', to: 'images'},
                {from: 'frontend/fonts', to: 'fonts'},
            ]
        })
    ],

}