Skip to content

Instantly share code, notes, and snippets.

@jack-pallot
Created October 8, 2020 09:57
Show Gist options
  • Save jack-pallot/3c37ab1531a6c36d78e071e4d9fa7f60 to your computer and use it in GitHub Desktop.
Save jack-pallot/3c37ab1531a6c36d78e071e4d9fa7f60 to your computer and use it in GitHub Desktop.
Slater Tailwind Preset
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment