webpack-common-config.js

/**
 * Reusable Webpack config elements
 * Initial goal: avoid config duplication between the main webpack config and the storybook webpack config
 */
const helpers = require("./helpers");

const tailwindJit = require("@tailwindcss/jit");
const autoprefixer = require("autoprefixer");

/**
 * Plugins
 */
const postCssPlugins = [
  ...

  /**
   * Tailwind
   */
  tailwindJit(helpers.root("tailwind.config.js")), // We use the helper to ensure that the path is always relative to the workspace root,

  // PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.
  // Write your CSS rules without vendor prefixes (in fact, forget about them entirely). Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you.
  autoprefixer,
];

/**
 * Tailwind config
 */
const tailwindWebpackRule = {
  test: /\.scss$/,
  loader: "postcss-loader",
  options: {
    // reference: https://github.com/webpack-contrib/postcss-loader
    postcssOptions: {
      ident: "postcss",
      syntax: "postcss-scss",
      plugins: postCssPlugins,
    },
  },
};

exports.tailwindWebpackRule = tailwindWebpackRule;