Tailwind + Phoenix Setup

.babelrc

{
    "presets": [
        "@babel/preset-env"
    ]
}

package.json

{
  "repository": {},
  "description": " ",
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "TAILWIND_MODE=watch NODE_ENV=development webpack --mode development --watch"
  },
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@tailwindcss/aspect-ratio": "0.2.0",
    "@tailwindcss/forms": "0.2.1",
    "@tailwindcss/typography": "0.4.0",
    "alpinejs": "2.8.2",
    "autoprefixer": "10.2.5",
    "babel-loader": "^8.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.4.2",
    "css-minimizer-webpack-plugin": "1.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "postcss": "8.2.8",
    "postcss-easy-import": "3.0.0",
    "postcss-hexrgba": "2.0.1",
    "postcss-loader": "5.2.0",
    "tailwindcss": "2.1.1",
    "terser-webpack-plugin": "^2.3.2",
    "webpack": "5.27.2",
    "webpack-cli": "4.5.0"
  }
}

tailwind.config.js

const { red, blueGray } = require('tailwindcss/colors');
const defaultTheme = require('tailwindcss/defaultTheme');

const colors = {
  white: '#ffffff',
  transparent: 'transparent',
  brand: {
    100: '#CAE6BF',
    200: '#50C5B6',
    300: '#00A1AF',
    400: '#00707A',
    500: '#064E55',
  },
  gray: blueGray,
  red,
};

module.exports = {
  mode: 'jit',
  purge: [ '../lib/mythic_web/**/*.{ex,leex,eex}', './js/**/*.js' ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors,
    fontFamily: {
      sans: [ 'Inter var', ...defaultTheme.fontFamily.sans ],
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [ require('@tailwindcss/typography'), require('@tailwindcss/forms'), require('@tailwindcss/aspect-ratio') ],
};

webpack.config.js

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
const postcssOptions = () => {
  const defaultOptions = [
    require('postcss-easy-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-hexrgba'),
  ];

  return {
    // Necessary for external CSS imports to work
    ident: 'postcss',
    plugins: [ ...defaultOptions ],
  };
};

module.exports = (env, options) => {
  const devMode = options.mode !== 'production';

  return {
    optimization: {
      minimizer: [
        new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
        new CssMinimizerPlugin({ parallel: true }),
      ],
    },
    entry: {
      app: glob.sync('./vendor/**/*.js').concat([ './js/app.js' ]),
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, '../priv/static/js'),
      publicPath: '/js/',
    },
    stats: 'minimal',
    devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: require.resolve('css-loader'),
              options: {
                importLoaders: 2,
                sourceMap: true,
                url: false,
              },
            },
            {
              loader: require.resolve('postcss-loader'),
              options: {
                postcssOptions: postcssOptions(),
                sourceMap: true,
              },
            },
          ],
        },
      ],
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: '../css/[name].css' }),
      new CopyWebpackPlugin([ { from: 'static/', to: '../' } ]),
    ],
  };
};