Slater Tailwind Preset

slater-tailwind-preset.js

const ExtractCSS = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

function tailwindPreset({ config, watch }) {
  config.module.rules.push({
    test: /\.css$/,
    exclude: /node_modules/,
    use: [
      ExtractCSS.loader,
      require.resolve('css-loader'),
      {
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            plugins: [
              require('postcss-import'),
              require('tailwindcss'),
              require('postcss-nested'),
              require('postcss-preset-env')({
                stage: 3,
              }),
              require('autoprefixer'),
            ],
          },
        },
      },
    ],
  })

  config.plugins = config.plugins.concat(
    [
      new ExtractCSS({
        filename: '[name].css',
      }),
      watch &&
        new OptimizeCssAssetsPlugin({
          cssProcessor: require('cssnano'),
          cssProcessorPluginOptions: {
            preset: ['default', { discardComments: { removeAll: true } }],
          },
        }),
    ].filter(Boolean)
  )

  return config
}

module.exports = tailwindPreset