[v4] Cannot apply unknown utility class #13336
-
|
I have a seperate utilities.css file containing @import from other subfolders ('form/buttons.css', 'form/inputs.css', etc). I keep getting this error: app.css utilities.css components.css Components usualy use my custom utility classes for example flex-start The CSS folder structure: What am I missing? |
Beta Was this translation helpful? Give feedback.
Replies: 10 comments 39 replies
-
|
Bump! Anyone got any ideas what's causing the error? |
Beta Was this translation helpful? Give feedback.
-
|
Sounds like you're trying to do |
Beta Was this translation helpful? Give feedback.
-
|
Exactly what @Fasunle said. I have had to put the utility definitions in the main file for my projects. I can't seem to add a @Utility definition unless it is top-level. I have never looked into it; I just wanted to mention it in case someone struggles with the same. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah... @Utility cannot be nested. @mhenrixon |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @Fasunle it works now. First I have to make it all @Utility
And now i can use it on my other class. |
Beta Was this translation helpful? Give feedback.
-
|
I am using laravel and vue and I am trying to put tw 4 to work. I have in extended the color navyBlue and previosuly it worked in tailwind.config.js extend: { Now I get the same error with unknown utility class. I tried also to use this in tailwind.config.js plugins: [ In app.css @Utility does not work and I tried something like this with no result though (i reckon is not tw native or I am not referencing something right?) ` ` any help/ ideea would be great. thanks |
Beta Was this translation helpful? Give feedback.
-
|
This is not ready but you still release v4.0??? It make my site broken :( |
Beta Was this translation helpful? Give feedback.
-
|
For anyone looking after upgrading to v4: If you have a main css file where you have |
Beta Was this translation helpful? Give feedback.
-
Solved it. As per Tailwind's Sveltekit install guide, use: @reference "tailwindcss/theme"; instead of @reference "[relative-path]/app.css"; |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for sharing this, here is more context from the docs https://tailwindcss.com/docs/upgrade-guide#using-apply-with-vue-svelte-or-css-modules |
Beta Was this translation helpful? Give feedback.
-
I try to use it with Laravel. In the
@import "tailwindcss";
@plugin "tailwindcss-primeui";
@import "./primevue/tailwind.css"; /* styles downloaded from the zip file This gives this error : Where and how should I use |
Beta Was this translation helpful? Give feedback.
-
|
@loxK I have the same issue, have you found a solution ? |
Beta Was this translation helpful? Give feedback.
-
|
In the meantime, I noticed that tailwind support for PrimeVue will be abandoned soon. So I switched to Vuetify for that new project. PrimeVue updates always have a lot of breaking changes. Too much time consuming. |
Beta Was this translation helpful? Give feedback.
-
|
I'm quite shocked at the fact that they push Tailwind 4 on us with such integral changes yet not document certain parts (IE:@apply) clearly. Don't force core changes on us if you not 110% ready. I've tried everything from trying to include the old tailwind.config file within css to @reference within the css file, NOTHING is working when it comes to @apply. Clearly not thought over properly. Here's an example of what I'm refering to: If sometone knows of a solution please comment |
Beta Was this translation helpful? Give feedback.
-
|
Prefixes in v4 are now separated by @import "tailwindcss" prefix(tw);
.quickgrid {
- @apply tw-table-auto
- tw-w-full;
+ @apply tw:table-auto
+ tw:w-full;
}
/* Table Header */
.quickgrid thead th {
- @apply tw-bg-slate-100
- dark:tw-bg-slate-800/70
- tw-py-4;
+ @apply tw:bg-slate-100
+ tw:dark:bg-slate-800/70
+ tw:py-4;
}As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding |
Beta Was this translation helpful? Give feedback.
-
|
Do you have proof that the prefix has changed, I dont think it has? I dont see prefix documentation anywhere again to my point of not properly testing everying. I've tested your prefix change and still having the same errors. |
Beta Was this translation helpful? Give feedback.
-
It was documented in the v4 beta docs: https://v3.tailwindcss.com/docs/v4-beta#using-a-prefix
Seems to work in this Tailwind Play at least, so it could be something particular to your project. You may also need to use the |
Beta Was this translation helpful? Give feedback.
-
|
Hi, After upgrading to Tailwind CSS v4, I'm encountering errors like "[plugin:vite:css] [postcss] Cannot apply unknown utility class: text-gray-200," despite using @reference. my app.css file looks like below In my datatable.css, I have [plugin:vite:css] [postcss] Cannot apply unknown utility class: text-gray-200 |
Beta Was this translation helpful? Give feedback.
-
|
Yup I'm having the exact same issue. Clearly it's not ready yet to be upgrades to 4.0! Also, using the excuse not to use @apply and use the CSS Classes instead is not a solution when working with large projecs that make use of dynamic components... |
Beta Was this translation helpful? Give feedback.
-
|
Hi, After upgrading to Tailwind CSS v4, I'm encountering errors like "[plugin:vite:css] [postcss] Cannot apply unknown utility class: text-gray-200," despite using @reference. my app.css file looks like below In my datatable.css, I have |
Beta Was this translation helpful? Give feedback.
-
|
Already responded to this above but just to add Documentation and exact steps is essential for this kind of stuff. |
Beta Was this translation helpful? Give feedback.
-
|
Without <style lang="postcss">
.test-pre {
@apply break-words whitespace-pre-wrap;
}
</style>but this ↓ throws error <style lang="postcss">
.test-color {
@apply bg-white;
}
</style>What is the difference? |
Beta Was this translation helpful? Give feedback.
-
|
From my understanding, it has always been discouraged to use |
Beta Was this translation helpful? Give feedback.
-
|
I just checked the docs again (v4), and it looks like
So, it's strange to read tweets with statements like:
From my perspective, "override the styles in a third-party library" is a perfectly valid and commonly used case. So why wouldn’t we be able to do this using the utilities we're already used to? Why should we have to learn internals like theme variables, which lack autocompletion, change from version to version, and basically take us back to plain CSS instead of Tailwind? This idea feels insane to me |
Beta Was this translation helpful? Give feedback.
-
|
Exactly the point I'm trying to make. Especially working with complex backend-end UI where dynamic components are used. For example I had to deal with a dynamic quickgrid native component and the only way to get it styled in was with @apply. Also, you cannot argue that @apply should be avoided and variables should be used... Thats extremely messy and almost tripple the amount of coding. Clearly 4.0 is not ready yet! Still sticking with 3 untill this is sorted out. |
Beta Was this translation helpful? Give feedback.
-
Just use You know how you have to do this in a Vue file when you want to use the <script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script>...and how if you dont |
Beta Was this translation helpful? Give feedback.
-
Thank you, Adam. Given that this advice comes from the creator of Tailwind, we understand that this is the recommended approach. I wasn’t complaining about the need to use |
Beta Was this translation helpful? Give feedback.
-
|
I opened a bug report for this. Honestly love debating but I dont have time and need a solution... |
Beta Was this translation helpful? Give feedback.
-
|
I looked into the upgrade guide but did not find what broke it |
Beta Was this translation helpful? Give feedback.
-
|
same error, it seems to think that @import "tailwindcss";
input {
padding: 6px;
@apply mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
} |
Beta Was this translation helpful? Give feedback.
-
is it terrible to link to a global css file or just directly import into each tailwindcss component? Can I do this? I also encountered this problem in the next section 3. |
Beta Was this translation helpful? Give feedback.
-
|
This will cause duplication in your CSS. In this situation, you'd use <style lang="postcss">
@reference "../../path/to/your/styles.css";
.my-element {
.div {
font-size: 50px;
@apply text-amber-300;
}
}
</style> |
Beta Was this translation helpful? Give feedback.
and others
Sounds like you're trying to do
@apply flex-centersomewhere — v4 doesn't currently support applying custom classes, only classes that are built in to the framework, so this just won't work quite yet. Will be in there eventually though before the real v4 release 👍