[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

[JingMatrix]

Thanks for your response. I didn't understand that @reference is an obligation.
This is certaining a breaking change, and not documented at all.

[wongjn]

To be fair, @reference itself is documentated but not mentioned in the upgrade guide.

[JingMatrix]

Now I have added @reference following your advice, and I am getting errors:

build error:
[vite-plugin-pwa:build] [postcss] Cannot apply unknown utility class: prose-headings:font-[Kaiti]
file: /home/jing/Documents/Project/blog/content/.vitepress/theme/tailwind.postcss:undefined:NaN

Could you please take a look at my css file
https://github.com/JingMatrix/jingmatrix.github.io/blob/tailwind/content/.vitepress/theme/tailwind.postcss
and provide some ideas?

Here, I am using the font-family utility of tailwindcss.

[wongjn]

It seems like you haven't included the @tailwindcss/typography plugin, hence the prose-headings: variant doesn't exist, hence prose-headings:font-[Kaiti] does not exist.

You'd need to use the @plugin directive to include the @tailwindcss/typography plugin

[JingMatrix]

Thank you very much, your conjecture was correct.
Though I didn't understand why v3 works as intended, since I have set the config properly:
https://github.com/JingMatrix/jingmatrix.github.io/blob/tailwind/tailwind.config.js

export default {
  darkMode: "class",
  content: [
    "./components/**/*.{html,js,vue,ts,md}",
    "./content/**/*.{html,js,vue,ts,md}",
    "./content/.vitepress/**/*.{html,js,vue,ts,md}",
  ],
  plugins: [typography],
};

[wongjn]

@apply in v4 is no longer "global" as it was in v3. Furthermore, v4 does not read tailwind.config.js by default whereas v3 does.

[JingMatrix]

I still found buggy behavior related to this @reference workwround.
My custom rules are overwritting by the default theme, please take a look my descriptions in detail: JingMatrix/jingmatrix.github.io#8 (comment).

[wongjn]

Yep, so it's because Vitepress's styles are not in any cascade layers while you have your styles in cascade layers. Styles in cascade layers have lower precedence than styles outside them, hence they are overridden.

[JingMatrix]

I don't think your explanation is correct, because using the devtools your will find that both rules are loaded by the same bundle css file.

[wongjn]

I think my explanation is correct. Here is some CSS from the Connect.vue component:

Notice how devtools surfaces the @layer components.

Then, compare this to an example reset rule from Vitepress:

Notice there is no cascade layer mentioned for this rule.

Hence the latter overrides the former.

[JingMatrix]

I see, I misunderstood your word cascade layers, which you meant rule blocks inside @layer.
In v3, the @layer is not functioning in this way, as you can see from the page https://jingmatrix.github.io/en/contact.

Hence, this is indeed also a breaking change.

[ajuvonen]

@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

I'm not competent enough to evaluate the design decision, and not about to start arguing what's the "right" way to apply Tailwind. However...having to not manually reference CSS files everywhere was one of the reasons I started using it. Going through the whole codebase adding @reference feels like a bit of a chore. Anyway, thanks for the help and good luck with v4!

[philipp-spiess]

Hey folks! We've just added a section on our upgrade guides that goes into more detail about the changed behavior for @apply.

To give further technical background, imagine a setup with two different Tailwind CSS configurations like this:

/* src/admin/index.css */
@theme {
  --color-primary: #fff;
}

/* src/app/index.css */
@theme {
  --color-primary: #000;
}

Since CSS modules, or <style> tags within .svelte, .vue, or .astro files are bundled separately for each page, they will go through your build tool as individual stylesheets with no reference to either of these configurations, so it's inherently ambiguous which of these two CSS configuration files you want to refer to in these situations.

Let us know if you run into any other issues with this, thanks!

[LeonardoDaLuz]

@wongjn

@reference "src/app.css";

Is there any way to pass the absolute path? Relative paths are very problematic since moving files with import autoupdate is a big deal in IDEs.

[wongjn]

You can try starting the path with a slash:

@reference "/home/users/project/src/app.css";

[LeonardoDaLuz]

You can try starting the path with a slash:

@reference "/home/users/project/src/app.css";

uh... Absolute path in the project, not in the system.
This is uggly and hard to maintain:
../../../../../../../../style.css

[wongjn]

You could try using Subpath Imports like:

"imports": {
  "#app.css": "./path/to/app.css"
},

@reference "#app.css";

[jamieconnor]

You could also try using resolve in Webpack
or alias in Vite

looks like this has been suggested earlier in the comments

[djamn]

So I am a bit confused. In tailwind v3 I was able to create global style classes using tailwind syntax like

.tw-heading {
@apply w-20
}

i checked out the docs and only find the alternative using @Utility but using general CSS syntax. Is there another possibility to still have global classes but with tailwind syntax?

[silence48]

i'm very confused. i can't get @apply to work basically at all now.

[wongjn]

You probably need to use the @reference directive.

[onyedikachi23]

@wongjn Do you mean we replace @apply with @.reference directive, or use @.reference directive instead of import "./styles.css" in my React app?

[wongjn]

In the stylesheet where you are using @apply that is giving the error, add @reference to the stylesheet. See the documentation for details.

[Miss-Vanshika]

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.

how??

[wongjn]

See the documentation for details.

[pdsuwwz]

Hello, I have previously upgraded the tailwind v4 of a project.

You can refer to this repo nextjs-nextra-starter and Commits

[clovu]

Hello, I have previously upgraded the tailwind v4 of a project.

You can refer to this repo nextjs-nextra-starter and Commits

很酷

[micobarac]

@apply is not global anymore, like it was with Tailwind CSS 3. You need to use @reference to point to Tailwind CSS 4 definitions.

[djamn]

Whats the reason for this change? Performance?

[wongjn]

See #15778 (comment)

[djamn]

See #15778 (comment)

Thanks. Assuming using Angular and having 100 components, do I have to add @reference to every component or is there an easier solution?

[wongjn]

You'd need to add @reference to every component. Better yet is to forgo @apply altogether.

[lemonCMS]

We have in our Angular 19 project about 100+ .scss files that are depending on @apply. Needing to add a@reference ../../../../relative-path in all those and future files is just not a real option.

If at least there was a option to use @reference "my-theme"; where the key 'my-theme' would somewhere reference to the theme stylesheet. That at least that would eliminate the nastyniss of having to add a relative path everywhere.

Or having the option to having @apply etc global through opt-in would also be a option.

Forgoing on using @apply in the current code base is just not a viable a option.

I hope somehow there will be / is a better solution.

[wongjn]

You trying using Subpath imports to create an alias to your main stylesheet like:

// package.json
{
  // …
  "imports": {
    "#my-theme.css": "./path/to/my/theme.css"
  }
}

@reference "#my-theme.css";

[lemonCMS]

That does not seem to work for stylesheets.

I have aslo tried:

"stylePreprocessorOptions": {
   "includePaths": [
     "apps/angular-tailwind4-test/src/styles"
   ]
 },

That works fine for @import / @use but does not with @reference.

style-preprocessor-options;

[lemonCMS]

For now i will use the file watcher from webstorm to add the @reference when needed

/**
 * @file WebStorm File Watcher Configuration for `add-tailwind-reference.js`
 *
 * This JSDoc comment provides instructions for setting up a WebStorm File Watcher
 * to automatically manage `@reference` lines in SCSS files based on the presence of `@apply`.
 *
 * @example
 * // 1. Open WebStorm Settings:
 * //    File > Settings... (or WebStorm > Preferences... on macOS)
 * //    Navigate to Tools > File Watchers.
 *
 * // 2. Add a New File Watcher:
 * //    Click the + (Add) button.
 * //    Select Custom.
 *
 * // 3. Configure the File Watcher:
 * //    Name: add-tailwind-reference (or any descriptive name).
 * //    Files to Watch:
 * //      File type: SCSS style sheet.
 * //      Scope: Project Files.
 * //      Track only root files: (Leave unchecked unless needed).
 * //    Tool to Run on Changes:
 * //      Program: C:\Program Files\nodejs\node (Adjust if your Node.js path is different).
 * //      Arguments: add-tailwind-reference.js $FilePath$
 * //        - `add-tailwind-reference.js`: The name of your script.
 * //        - `$FilePath$`: WebStorm macro for the changed file's path.
 * //      Output paths to refresh: (Leave blank or add specific paths).
 * //      Working directory: $ContentRoot$.
 * //      Environment variables: (Leave as is).
 * //    Advanced Options:
 * //      Auto-save edited files to trigger the watcher: (Check for immediate execution on save).
 * //      Trigger the watcher on external changes: (Check to trigger on external modifications).
 * //      Trigger the watcher regardless of syntax errors: (Check with caution).
 * //      Create output file from stdout: (Leave unchecked).
 * //    Show console: On error.
 * //    Output filters: (Leave blank or add regex filters).
 *
 * // 4. Click OK to save the configuration.
 *
 * @remarks
 * - Ensure the Node.js path is correct.
 * - Place `add-tailwind-reference.js` in the project root or a discoverable location.
 * - Verify file permissions for Node.js.
 * - Use `console.log()` in the script for debugging.
 *
 * @see {@link https://www.jetbrains.com/help/webstorm/file-watchers.html WebStorm File Watchers Documentation}
 * @see {@link https://nodejs.org/ Node.js Official Website}
 *
 * @param {string} $FilePath$ - The absolute path of the SCSS file that triggered the watcher. (WebStorm macro)
 * @param {string} $ContentRoot$ - The root directory of the project. (WebStorm macro)
 *
 * @example
 * // Example command line arguments:
 * // add-tailwind-reference.js /path/to/your/file.scss
 *
 * @example
 * // Example script usage:
 * // node add-tailwind-reference.js path/to/your/file.scss
 */
const fs = require('fs');
const path = require('path');


function processScssFile(filePath, cssFilePath) {
  fs.readFile(filePath, 'utf8', (err, data) => {
    if (err) {
      console.error(`Error reading file ${filePath}: ${err}`);
      return;
    }

    const relativePath = path.relative(path.dirname(filePath), cssFilePath).replace(/\\/g, '/');
    const referenceLine = `@reference "${relativePath}";\n`;
    const applyRegex = /@apply\b/;

    if (applyRegex.test(data)) {
      // Check for the reference line *before* adding it
      if (!data.includes(referenceLine.trim())) { // Use includes for a more robust check.
        const updatedData = referenceLine + data;
        fs.writeFile(filePath, updatedData, 'utf8', (writeErr) => {
          if (writeErr) {
            console.error(`Error writing to file ${filePath}: ${writeErr}`);
          } else {
            console.log(`Updated ${filePath} with reference: ${referenceLine.trim()}`);
          }
        });
      } else {
        console.log(`${filePath} already contains the reference.`);
      }
    } else {
      // Remove reference if @apply is not found
      const trimmedData = data.replace(/^[\s\n]+/, ''); // Remove leading whitespace and newlines

      if (trimmedData.startsWith(referenceLine.trim())) {
        const updatedData = data.slice(referenceLine.length);
        fs.writeFile(filePath, updatedData, 'utf8', (writeErr) => {
          if (writeErr) {
            console.error(`Error writing to file ${filePath}: ${writeErr}`);
          } else {
            console.log(`Removed reference from ${filePath}.`);
          }
        });
      } else {
        console.log(`${filePath} does not contain the reference.`);
      }
    }
  });
}

processScssFile(process.argv[2], 'path-to-your-theme/theme.css');

[prathamesh-patil-5090]

I just create a new global.css which is based on Tailwind CSS v4. Obviously after reading the docs. It guided me thoroughly because font-extrabold, shadow-100 do not work in it anymore.

global.css

@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --radius: 0.5rem;
    }
}

@layer utilities {
    .flex-between {
        @apply flex justify-between items-center;
    }

    .text-30-extrabold {
        @apply text-[30px] font-extrabold text-white;
    }

    .text-30-bold {
        @apply text-[30px] font-bold text-black;
    }

    .text-30-semibold {
        @apply font-semibold text-[30px] text-black;
    }

    .text-26-semibold {
        @apply font-semibold text-[26px] text-black;
    }

    .text-24-black {
        @apply text-[24px] font-black text-black;
    }

    .text-20-medium {
        @apply font-medium text-[20px] text-black;
    }

    .text-16-medium {
        @apply font-medium text-[16px] text-black;
    }

    .text-14-normal {
        @apply font-normal text-sm text-white/80;
    }

    .pink_container {
        @apply w-full bg-white min-h-[530px] flex justify-center items-center flex-col py-10 px-6;
    }

    .tag {
        @apply bg-black px-6 py-3 font-sans font-bold rounded-sm uppercase relative ;
    }

    .heading {
        @apply uppercase bg-black px-6 py-3 font-sans font-extrabold text-white sm:text-[54px] sm:leading-[64px] text-[36px] leading-[46px] max-w-5xl text-center my-5;
    }

    .sub-heading {
        @apply font-medium text-[20px] text-white max-w-2xl text-center break-words;
    }

    .section_container {
        @apply px-6 py-10 max-w-7xl mx-auto;
    }

    .card_grid {
        @apply grid md:grid-cols-3 sm:grid-cols-2 gap-5;
    }

    .card_grid-sm {
        @apply grid sm:grid-cols-2 gap-5;
    }

    .no-result {
        @apply text-black text-sm font-normal;
    }

    /* profile */
    .profile_container {
        @apply w-full pb-10 pt-20 px-6 max-w-7xl mx-auto lg:flex-row flex-col flex gap-10;
    }

    .profile_card {
        @apply w-80 px-6 pb-6 pt-20 flex flex-col justify-center items-center bg-white border-[5px] border-black shadow-xs rounded-[30px] relative z-0 h-fit max-lg:w-full;
    }

    .profile_title {
        @apply w-11/12 bg-white border-[5px] border-black rounded-[20px] px-5 py-3 absolute -top-9 after:absolute after:content-[''] after:-top-1 after:right-0 after:-skew-y-6 after:bg-black after:-z-[1] after:rounded-[20px] after:w-full after:h-[60px] before:absolute before:content-[''] before:-bottom-1 before:left-0  before:-skew-y-6 before:w-full before:h-[60px] before:bg-black  before:-z-[1] before:rounded-[20px] shadow-xs;
    }

    .profile_image {
        @apply rounded-full object-cover border-[3px] border-black;
    }

    /* idea details */
    .divider {
        @apply border-dotted bg-zinc-400 max-w-4xl my-10 mx-auto;
    }

    .view_skeleton {
        @apply bg-zinc-400 h-10 w-24 rounded-lg fixed bottom-3 right-3;
    }

    /* navbar */
    .avatar {
        @apply p-0 focus-visible:ring-0 bg-none rounded-full drop-shadow-md ;
    }

    .dropdown-menu {
        @apply w-56 border-[5px] border-black bg-white p-5 rounded-2xl ;
    }

    .login {
        @apply border-[5px] py-4 border-black bg-white text-black relative shadow-xs font-sans font-medium hover:shadow-none transition-all duration-500 ;
    }

    /* searchform */
    .search-form {
        @apply max-w-3xl w-full min-h-[80px] bg-white border-[5px] border-black rounded-[80px] text-[24px] mt-8 px-5 flex flex-row items-center gap-5;
    }

    .search-input {
        @apply flex-1 font-bold placeholder:font-semibold placeholder:text-black w-full h-auto outline-none;
    }

    .search-btn {
        @apply size-[50px] rounded-full bg-black flex justify-center items-center ;
    }

    /* startupcard */
    .startup-card {
        @apply bg-white border-[5px] border-black py-6 px-5 rounded-[22px] shadow-sm hover:border-white transition-all duration-500 hover:shadow-md hover:bg-white/100;
    }

    .startup-card_date {
        @apply font-medium text-[16px] bg-white/100 px-4 py-2 rounded-full group-hover:bg-white/100;
    }

    .startup-card_desc {
        @apply font-normal text-[16px] line-clamp-2 my-3 text-black break-all;
    }

    .startup-card_img {
        @apply w-full h-[164px] rounded-[10px] object-cover;
    }

    .startup-card_btn {
        @apply rounded-full bg-black/200 font-medium text-[16px] text-white px-5 py-3 ;
    }

    .startup-card_skeleton {
        @apply w-full h-96 rounded-[22px] bg-zinc-400;
    }

    /* startupform */
    .startup-form {
        @apply max-w-2xl mx-auto bg-white my-10 space-y-8 px-6;
    }

    .startup-form_label {
        @apply font-bold text-[18px] text-black uppercase;
    }

    .startup-form_input {
        @apply border-[3px] border-black px-5 py-7 text-[18px] text-black font-semibold rounded-full mt-3 placeholder:text-black ;
    }

    .startup-form_textarea {
        @apply border-[3px] border-black p-5 text-[18px] text-black font-semibold rounded-[20px] mt-3 placeholder:text-black ;
    }

    .startup-form_error {
        @apply text-red-500 mt-2 ml-5;
    }

    .startup-form_editor {
        @apply mt-3 border-[3px] border-black text-[18px] text-black font-semibold placeholder:text-black ;
    }

    .startup-form_btn {
        @apply bg-white border-[4px] border-black rounded-full p-5 min-h-[70px] w-full font-bold text-[18px] ;
    }

    /* view */
    .view-container {
        @apply flex justify-end items-center mt-5 fixed bottom-3 right-3;
    }

    .view-text {
        @apply font-medium text-[16px] bg-white/100 px-4 py-2 rounded-lg capitalize;
    }

    .category-tag {
        @apply font-medium text-[16px] bg-white/100 px-4 py-2 rounded-full;
    }

    .pattern {
        background-image: linear-gradient(
                to right,
                transparent 49.5%,
                rgba(251, 232, 67, 0.2) 49.5%,
                rgba(251, 232, 67, 0.6) 50.5%,
                transparent 50.5%
        );
        background-size: 5% 100%;
        background-position: center;
        background-repeat: repeat-x;
    }

    .text-white-100\/80 {
        color: rgba(247, 247, 247, 0.8); /* Use the RGBA equivalent of white-100 with 80% opacity */
    }
}

.w-md-editor-toolbar {
    padding: 10px ;
}

[SebasxSwat]

Quizás no quieras @importvolver a la hoja de estilos principal, ya que duplicaría el CSS generado por Tailwind en el otro archivo. En su lugar, usarías @reference .

Yo tengo el siguiente error en el global.css:

Error: Cannot apply unknown utility class: border-border

./app/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css

Codigo:

@layer base {

• {
  @apply border-border;
  }
  body {
  @apply bg-background text-foreground;
  }
  }

[Anikesh-Srivastav]

Can anyone guide me whats wrong with my code why and it is not forwarding the attributes

@import "tailwindcss";

body {
font-family: 'General sans', sans-serif;
width: 100dvw;
background-color: #dfdff0;
overflow-x: hidden;
}

@layer base {
@font-face {
font-family: "circular-web";
src: url("/fonts/circularweb-book.woff2") format("woff2");
}

@font-face {
  font-family: "general";
  src: url("/fonts/general.woff2") format("woff2");
}

@font-face {
  font-family: "robert-medium";
  src: url("/fonts/robert-medium.woff2") format("woff2");
}

@font-face {
  font-family: "robert-regular";
  src: url("/fonts/robert-regular.woff2") format("woff2");
}

@font-face {
  font-family: "zentry";
  src: url("/fonts/zentry-regular.woff2") format("woff2");
}

}

@theme {
--font-zentry: 'zentry', sans-serif;
--font-general: 'general', sans-serif;
--font-circular-web: 'circular-web', sans-serif;
--font-robert-medium: 'robert-medium', sans-serif;
--font-robert-regular: 'robert-regular', sans-serif;

--colors: {
  blue: {
    50: "#DFDFF0",
    75: "#dfdff2",
    100: "#F0F2FA",
    200: "#010101",
    300: "#4FB7DD",
  },
  violet: {
    300: "#5724ff",
  },
  yellow: {
    100: "#8e983f",
    300: "#edff66",
  }
}

}

@layer utilities {
/* Add the custom-font class first */
.custom-font {
@reference font-zentry;
}

/* Then your existing utilities */
.border-hsla {
  @reference border border-white/20;
}

.nav-hover-btn {
  @reference relative ms-10 font-general text-xs uppercase text-blue-50 cursor-pointer;
}

/* Rest of your utility classes... */

}
.border-hsla {
@reference border border-white/20;
}

.nav-hover-btn {
@reference relative ms-10 font-general text-xs uppercase text-blue-50 cursor-pointer;
}

.nav-hover-btn::after {
@reference absolute -bottom-0.5 left-0 h-[2px] w-full origin-bottom-right scale-x-0 bg-neutral-800 transition-transform duration-300 ease-[cubic-bezier(0.65_0.05_0.36_1)] dark:bg-white;
content: "";
}

.nav-hover-btn:hover::after {
@reference origin-bottom-left scale-x-100;
}

.floating-nav {
@reference bg-black rounded-lg border;
}

.absolute-center {
@reference absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
}

.flex-center {
@reference flex justify-center items-center;
}

.mask-clip-path {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.special-font b {
font-family: "Zentry";
font-feature-settings: "ss01" on;
}

.hero-heading {
@reference uppercase font-zentry font-black text-5xl sm:right-10 sm:text-7xl md:text-9xl lg:text-[12rem];
}

.about-subtext {
@reference absolute bottom-[-80dvh] left-1/2 w-full max-w-96 -translate-x-1/2 text-center font-circular-web text-lg md:max-w-[34rem];
}

.about-image {
@reference absolute left-1/2 top-0 z-20 h-[60vh] w-96 -translate-x-1/2 overflow-hidden rounded-3xl md:w-[30vw];
}

.animated-title {
@reference flex flex-col gap-1 text-7xl uppercase leading-[.8] text-white sm:px-32 md:text-[6rem];
}

.animated-word {
@reference special-font font-zentry font-black opacity-0;
transform: translate3d(10px, 51px, -60px) rotateY(60deg) rotateX(-40deg);
transform-origin: 50% 50% -150px !important;
will-change: opacity, transform;
}

.bento-tilt_1 {
@reference relative border-hsla col-span-2 overflow-hidden rounded-md transition-transform duration-300 ease-out;
}

.bento-tilt_2 {
@reference relative col-span-1 row-span-1 overflow-hidden rounded-md transition-transform duration-300 ease-out;
}

.bento-title {
@reference uppercase text-4xl md:text-6xl font-black font-zentry;
}

.story-img-container {
@reference relative h-[90vh] md:h-dvh w-full;
filter: url("#flt_tag");
}

.story-img-mask {
@reference absolute top-0 left-0 w-full h-full overflow-hidden md:left-[20%] md:top-[-10%] md:w-4/5 md:h-4/5;
clip-path: polygon(4% 0, 83% 21%, 100% 73%, 0% 100%);
}

.story-img-content {
@reference absolute w-full h-[50dvh] md:h-dvh left-10 top-16 md:left-0 md:top-10 lg:left-[-300px] lg:top-[-100px] opacity-100;
transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1);
}

.gallery-img-container {
@reference w-64 h-64 overflow-hidden bg-violet-300;
}

.gallery-img {
@reference w-full h-full bg-cover;
}

.gallery-img-4 {
@reference sm:w-80 sm:h-80 md:h-96 md:w-[25rem] rounded-lg;
}

.sword-man-clip-path {
clip-path: polygon(16% 0, 89% 15%, 75% 100%, 0 97%);
}

.contact-clip-path-1 {
clip-path: polygon(25% 0%, 74% 0, 69% 64%, 34% 73%);
}

.contact-clip-path-2 {
clip-path: polygon(29% 15%, 85% 30%, 50% 100%, 10% 64%);
}

/* Indicator Animation */
.indicator-line {
@reference h-1 w-px rounded-full bg-white transition-all duration-200 ease-in-out;
}

.indicator-line.active {
animation: indicator-line 0.5s ease infinite;
animation-delay: calc(var(--animation-order) * 0.1s);
}

@Keyframes indicator-line {
0% {
height: 4px;
transform: translateY(0px);
}
50% {
height: 16px;
transform: translateY(-4px);
}
100% {
height: 4px;
transform: translateY(0px);
}
}

/* Three-Body Loader (From Uiverse.io) */
.three-body {
--uib-size: 35px;
--uib-speed: 0.8s;
--uib-color: #5d3fd3;
position: relative;
display: inline-block;
height: var(--uib-size);
width: var(--uib-size);
animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
}

.three-body__dot {
position: absolute;
height: 100%;
width: 30%;
}

.three-body__dot:after {
content: "";
position: absolute;
height: 0%;
width: 100%;
padding-bottom: 100%;
background-color: var(--uib-color);
border-radius: 50%;
}

.three-body__dot:nth-child(1) {
bottom: 5%;
left: 0;
transform: rotate(60deg);
transform-origin: 50% 85%;
}

.three-body__dot:nth-child(1)::after {
bottom: 0;
left: 0;
animation: wobble1 var(--uib-speed) infinite ease-in-out;
animation-delay: calc(var(--uib-speed) * -0.3);
}

.three-body__dot:nth-child(2) {
bottom: 5%;
right: 0;
transform: rotate(-60deg);
transform-origin: 50% 85%;
}

.three-body__dot:nth-child(2)::after {
bottom: 0;
left: 0;
animation: wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -0.15) ease-in-out;
}

.three-body__dot:nth-child(3) {
bottom: -5%;
left: 0;
transform: translateX(116.666%);
}

.three-body__dot:nth-child(3)::after {
top: 0;
left: 0;
animation: wobble2 var(--uib-speed) infinite ease-in-out;
}

@Keyframes spin78236 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

@Keyframes wobble1 {
0%, 100% {
transform: translateY(0%) scale(1);
opacity: 1;
}
50% {
transform: translateY(-66%) scale(0.65);
opacity: 0.8;
}
}

@Keyframes wobble2 {
0%, 100% {
transform: translateY(0%) scale(1);
opacity: 1;
}
50% {
transform: translateY(66%) scale(0.65);
opacity: 0.8;
}
}

[batmanSix]

我在nextjs15 中 使用 报错

[clovu]

我在nextjs15 中 使用 报错

就像这个评论所说 #15778 (comment) 你需要在你使用 @apply 的文件中通过 @reference 引入你的主要 css 文件