[v4] Cannot apply unknown utility class: xxx

[clovu]

Hello！

After upgrading from v3 to v4（via CLI）, I encountered some error: Cannot apply unknown utility class: text-card-foreground.

This never happened in v3.

After some trial and error, I found that it seems necessary to import the main CSS file in my CSS.

Is this the expected behavior? This will cause a large number of component styles to have issues.

Or, is there a trick for automatic import?

[wongjn]

You may not want to @import the main stylesheet again, as that will duplicate the Tailwind-generated CSS in the other file. You would use @reference instead.

[ajuvonen]

After attempting migration, my app won't start at all, instead I get console full of these errors warning about not being able to apply basic tailwind classes. I'm yet to figure out what goes wrong.

[wongjn]

After attempting migration, my app won't start at all, instead I get console full of these errors warning about not being able to apply basic tailwind classes. I'm yet to figure out what goes wrong.

@apply is no longer global. You may need to use @reference.

---

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097

[clovu]

You may not want to @import the main stylesheet again, as that will duplicate the Tailwind-generated CSS in the other file. You would use @reference instead.

Oh! I think I should have understood. Thank you!

[CrahunGit]

Same for me but not every time. It happens from time to time after migration.

If I remove the leading-6 then it throws error on the next class it finds

[RichForever]

Same here for me in scss file
Cannot apply unknown utility class: xl:text-base

[wongjn]

Same here for me in scss file Cannot apply unknown utility class: xl:text-base

Could you provide an example that reproduces the error please?

[RichForever]

Sure. Something like that

webpack.config.js

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require("path");
const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const WebpackAssetsManifest = require("webpack-assets-manifest");
const { EsbuildPlugin } = require('esbuild-loader')
const ProgressPlugin = require('progress-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");


const isProduction = process.env.NODE_ENV == "production";

const config = {
  blocks: "./blocks",
  src: {
    main: './src/',
    scripts: './src/js',
    styles: './src/scss',
    images: './src/images',
    fonts: './src/fonts',
  },
  dist: {
    main: './dist',
    images: '',
    fonts: '',
  }
}

module.exports = {
  mode: isProduction ? "production" : "development",
  entry: {
    "app-scripts": config.src.scripts + "/app.js",
    "blocks": config.src.scripts + "/blocks.js",
    "twig": config.src.scripts + "/twig.js",
    "editor-scripts": config.src.scripts + "/editor-scripts.js",
    "app-styles": config.src.styles + "/app.scss",
    "theme": config.src.styles + "/theme.scss",
    "editor-styles": config.src.styles + "/editor-styles.scss",
  },
  output: {
    path: path.resolve(__dirname, config.dist.main),
    filename: isProduction ? "[name].[chunkhash:8].js" : "[name].js",
    chunkFilename: isProduction ? "[name].[chunkhash:8].js" : "[name].js",
    clean: true,
  },
  devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map',
  plugins: [
    new ProgressPlugin(),
    new RemoveEmptyScriptsPlugin(),
    new WebpackAssetsManifest({
      output: path.resolve(__dirname, config.dist.main + "/manifest.json"),
      customize(entry, original, manifest, asset) {
        const pattern = /\.(js|css)$/i;
        if (!pattern.test(entry.key)) {
          return false;
        }
      },
    }),
    new MiniCssExtractPlugin({
      filename: isProduction ? "[name].[chunkhash:8].css" : "[name].css",
      chunkFilename: isProduction ? "[name].[chunkhash:8].css" : "[name].css",
    }),
    new BrowserSyncPlugin({
      host: 'localhost',
      port: 3000,
      proxy: 'http://dev.site',
      files: [
          "./**/*.twig",
          "./**/*.php",
          "./**/*.scss",
          "./**/*.css",
          "./**/*.js"
      ]
    })
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        exclude: /node_modules/,
        use: {
          loader: 'esbuild-loader',
          options: {
            loader: 'js',
            target: 'es2015'
          }
        }
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ],
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        type: "asset/resource",
        generator: {
          filename: "images/[name][ext]",
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
        generator: {
          filename: "fonts/[name][ext]",
        },
      },
      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
  resolve: {
    alias: {
      images: path.join(__dirname, config.src.images),
      fonts: path.join(__dirname, config.src.fonts),
      blocks: path.join(__dirname, config.blocks),
    },
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/](?!alpinejs)/,
          name: "vendors",
          chunks: "all",
        },
      },
    },
    minimizer: [
      "...",
      new CssMinimizerPlugin(),
      new ImageMinimizerPlugin({
        severityError: "warning",
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminMinify,
          options: {
            plugins: [
              "imagemin-gifsicle",
              "imagemin-mozjpeg",
              "imagemin-pngquant",
              "imagemin-svgo",
            ],
          },
        },
      }),
      new EsbuildPlugin(),
    ],
  },
};

src/scss/app.scss

@import "tailwindcss";

postcss.config.js

const purgecss = require("@fullhuman/postcss-purgecss");
const purgecssWordpress = require("purgecss-with-wordpress");

module.exports = {
  plugins: [
    require("@tailwindcss/postcss"),
  ],
};

src/scss/components/_buttons.scss

.btn:not(.wp-block-button),
.btn > .wp-block-button__link {
  @apply inline-flex items-center rounded-lg px-8 py-3 text-center text-sm font-semibold text-white-500 focus:ring-4 focus:ring-black-300 xl:text-base;
}

.btn--primary:not(.wp-block-button),
.btn--primary > .wp-block-button__link {
  @apply bg-purple-500 hover:bg-purple-600 focus:ring-4 focus:ring-purple-300;
}

.btn--primary-outline:not(.wp-block-button),
.btn--primary-outline > .wp-block-button__link {
  @apply border-2 border-purple-500 bg-transparent text-purple-500 hover:border-purple-600 hover:bg-purple-600 hover:text-white-500 focus:ring-4 focus:ring-purple-300;
}

.btn--secondary:not(.wp-block-button),
.btn--secondary > .wp-block-button__link {
  @apply bg-orange-500 hover:bg-orange-600 focus:ring-4 focus:ring-orange-300;
}

.btn--secondary-outline:not(.wp-block-button),
.btn--secondary-outline > .wp-block-button__link {
  @apply border-2 border-orange-500 bg-transparent text-orange-500 hover:border-orange-600 hover:bg-orange-600 hover:text-white-500 focus:ring-4 focus:ring-orange-300;
}

Build files using npm run build

"build": "webpack --mode=production --node-env=production",

[wongjn]

You may need to use @reference in your src/scss/components/_buttons.scss.

It could also be that Sass evaluates the @imports before Tailwind which could cause problems. Consider seeing if there is a way to exclude the @import processing from Sass.

Otherwise, please consider providing a more all-encompassing example - like a remotely-hosted git repository. This is so I don't have to figure out which packages I need to install and other such things that take time to setup but not condusive to the problem.

[RichForever]

@wongjn unfortunatelly it's not working. I changed my repo to be public - here

[wongjn]

Several things:

1. Can't resolve

I was initially getting:

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Can't resolve '../app.scss' in '/path/to/project/src/scss'

And this is because Sass processes the files before Tailwind. Thus, the partials that have the @reference directives would already have been folded into editor-styles.scss or theme.scss.

Thus we should change the @reference path to be relative to their "main" file:

-@reference "../app.scss";
+@reference "./app.scss";

2. Cannot apply unknown utility class

Then, I was getting:

Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Cannot apply unknown utility class: hover:text-white-500

And this was because there was no white-500 value defined in the Tailwind configuration. Adding it in src/app.scss solved the problem:

 @import "tailwindcss";
+
+@theme {
+  --color-white-500: foo;
+}

[RichForever]

Awesome, it's working. Thank you so much!

[JingMatrix]

Hello, I also encounter the same problem when upgrade to tailwind v4.
For me the problem wasn't @reference, I believe.
Here is my code:

<style scoped>
@tailwind base;
@layer base {
	input:focus {
		@apply shadow-md
	}
	input {
		@apply bg-transparent border-2 border-gray-300 rounded-lg py-2 px-4 inline-block w-1/2 appearance-none leading-normal
	}
	button {
		@apply bg-transparent ml-10 hover:bg-blue-500 text-blue-700 dark:text-green-400 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded
	}
}
</style>

To reproduce it, please use the this branch: https://github.com/JingMatrix/jingmatrix.github.io/tree/tailwind

The error is:

build error:
[vite-plugin-pwa:build] [postcss] Cannot apply unknown utility class: shadow-md
file: /home/jing/Documents/Project/blog/content/en/writing/2019-12-21-Workflow.md?vue&type=style&index=0&scoped=4d4ac9cb&lang.css:undefined:NaN

[wongjn]

It seems you are missing @reference whereever you are using @apply. You'd need to add it in like so:

 <style scoped>
+@reference "tailwindcss/theme.css";
 @tailwind base;
 @layer base {

---

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097