Exclude File Paths from Tailwind Config or PostCSS Loader

Question

I am adding Tailwind to an Angular project, which I've done before on new setups without issue. The difference here is that I am adding our old bootstrap based theme to this project, and Tailwind. The idea is that we will slowly move to Tailwind over the coming months.

When I add Tailwind alone, I have no issues with the following tailwind.config.js file and additional webpack.config.js file:

// tailwind.config.js
module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
    // defaultLineHeights: true,
    // standardFontWeights: true
  },
  purge: ['./apps/**/src/**/*.html', './apps/**/**/*.ts', './libs/**/*.html', './libs/**/*.ts'],
  theme: {
    extend: {
      fontSize: {
        xxs: '0.625rem',
      },
      colors: {
        'brand-color': 'var(--brand_color)',
        'motiv-blue': {
          lighter: '#8AC6F5',
          default: '#0094cd',
        },
      },
    },
  },
  variants: {},
  plugins: [require('@tailwindcss/ui')],
};

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            ident: "postcss",
            syntax: "postcss-scss",
            plugins: [
              require("postcss-import"),
              require("tailwindcss"),
              require("autoprefixer"),
            ],
          },
        },
      },
    ],
  },
};

So those configuration files work great for a new project. However, when trying to add Tailwind on top of a separate theme, this doesn't work. I added the theme's styles.scss file to the angular.json configuration for this project:

"styles": ["libs/theme/scss/styles.scss", "apps/hsa-portal/src/styles.scss"]

And then served the project, but get the following error:

Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Failed to find 'libs/theme/scss/brand-colors'
  in [
    /path/to/component
  ]

I tried adding the following exclude array (also just a single item) to the postcss-loader config in the webpack.config.js file, but it didn't solve anything:

exclude: [
  /libs\/theme\/scss/,
  /libs\/theme\/scss\/brand-colors/,
  /libs\/theme\/scss\/variables/,
  /bootstrap/,
],

There's got to be a way to either tell postcss-loader where to import these files from so that it works as expected, or to ignore those paths and just leave them alone. That's what I'm looking for, but I'm not very experienced with Webpack or PostCSS Loader.

Edit

Changing the webpack.config.js file slightly, like this:

{
  test: /\.scss$/,
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      ident: 'postcss',
      syntax: 'postcss-scss',
      plugins: (loader) => [
        require('postcss-import')({ root: loader.resourcePath }),
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
},

Made the project build again but the Tailwind styles have disappeared. Essentially all I did was make the plugins attribute a function that returned an array, and set the root path for the postcss-import config.

Exclude File Paths from Tailwind Config or PostCSS Loader

Edit

0 Answers0