Using Tailwind CSS with Sage 9 + Webpack

sage
6

Sage loads PostCSS plugins with postcss-loader. Adding tailwindcss to the plugin list and then specifying the path to the config as a string works. Here’s the default postcss.config.js with the described change:

/* eslint-disable */

const cssnanoconfig = {
  preset: ['default', { discardcomments: { removeall: true } }]
};

module.exports = ({ file, options }) => {
  return {
    parser: options.enabled.optimize ? 'postcss-safe-parser' : undefined,
    plugins: {
      // I’m using the to get the assets path (see config.js),
      // but you could just use the absolute path instead.
      tailwindcss: `${options.paths.assets}/styles/tailwind.js`, 
      cssnano: options.enabled.optimize ? cssnanoconfig : false,
      autoprefixer: true,
    },
  };
};

Also, you’ll need to add tailwind to stylelint’s ignoreAtRules list in package.json so linting styles doesn’t throw errors at you (h/t @austenc via his issue on the sage-installer repo).

Now add PurgeCSS and you’ve got an awesome setup for designing with speed whilst keeping your stylesheet tiny (when building for production).

3 Likes