Using Tailwind Arbitrary Value Support with SCSS

Question

How to use the new TailwindCSS Arbitrary Value Support with SCSS modules in Next.js?

The following code's CSS version was working well, but the SCSS version is throwing error:

// styles/foo.module.scss

.foo {
  @apply text-[#0e407c];
}

// pages/index.js

import styles from '../styles/foo.module.scss';
const IndexPage = () => <div className={styles.foo}>Hello World</div>;
export default IndexPage;

Error Log:

D:\foobar on main ≡ via  14.17.1
➜ rm -r .next; yarn build
yarn run v1.22.5
$ next build
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types
warn  - No ESLint configuration detected. Run next lint to begin setup

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
info  - Creating an optimized production build
Failed to compile.

./styles/foo.module.scss.webpack[javascript/auto]!=!./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[3].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[3].use[2]!./node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[3].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[3].use[4]!./styles/foo.module.scss
Error: resolve-url-loader: CSS error
  Invalid mapping: {"generated":{"line":1,"column":25},"source":"file://D:\\foobar\\styles\\foo.module.scss","original":{"column":null},"name":null}


> Build error occurred
Error: > Build failed because of webpack errors
    at D:\foobar\node_modules\next\dist\build\index.js:15:924
    at async Span.traceAsyncFn (D:\foobar\node_modules\next\dist\telemetry\trace\trace.js:6:584)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The error is occurring only on production builds.

Complete repo: https://github.com/brc-dd/nextjs-tailwindcss-bug

---

Additional Context

Version Details:

    "next": "11.0.1",
    "autoprefixer": "10.3.1",
    "postcss": "8.3.6",
    "postcss-flexbugs-fixes": "5.0.2",
    "postcss-preset-env": "6.7.0",
    "sass": "1.36.0",
    "tailwindcss": "2.2.4"

Node.js: 14.7.1
OS: Windows 11 (22000.100)

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: { flexbox: 'no-2009' },
      features: { 'custom-properties': false },
      stage: 3,
    },
  },
};

// tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.js']
};

PS: "arbitrary-valued classes" are not same as "arbitrary CSS classes" mentioned here. The former are part of the JIT core, hence can be directly applied without any plugin or defining under @layer directive.

Answer 1

If you're using JIT compiling make sure not to place classes with custom values opacity-[0.87] at the end of @apply.

❌ This will not work
.class {
  @apply text-black text-opacity-[0.87];
}
✅ This will work
.class {
  @apply text-opacity-[0.87] text-black;
}

---

This is a caused by a bug in resolve-url-loader v2 and v3.

Answer 2

It appears that setting sourceMap option to false for resolve-url-loader does the job. Also, according to the comments in the code, it should be safe to do so.

Here is the next.config.js to override the config:

module.exports = {
  webpack(config) {
    const rules = config.module.rules
      .find((rule) => typeof rule.oneOf === 'object')
      .oneOf.filter((rule) => Array.isArray(rule.use));

    rules.forEach((rule) => {
      rule.use.forEach((moduleLoader) => {
        if (moduleLoader.loader.includes('resolve-url-loader'))
          moduleLoader.options.sourceMap = false;
      });
    });

    return config;
  },
};