Please give me details related to our code for "Unknown word" error. #16447
Comments
|
The least amount of information could be the word itself. I think that could also help. |
|
Hey! There is likely something detected as an arbitrary candidate that produces invalid CSS. Unfortunately it seems like downstream tools like PostCSS will choke on that completely without giving you more information :/ Since I see that you're using Vite, you could try adding this Vite plugin to print the interim CSS and then send it to us so we can take a look at what the faulty line is? Definitely something we should handle better! /* vite.config.ts */
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
react(),
tailwindcss(),
+ inspect(),
],
})
+ function inspect() {
+ return {
+ name: 'vite-plugin-inspect',
+ enforce: 'pre',
+ transform(css, id) {
+ if (id.endsWith('.css')) {
+ console.log(css)
+ }
+ },
+ }
+ } |
|
@philipp-spiess the plugin you said created 10 thousand lines of code. Almost half a megabyte. I had to zip it. |
|
I would expect it would be because of: .after\:content-\[\"\;\"\;\] {
&::after {
content: var(--tw-content);
--tw-content: " " !important;
content: var(--tw-content) !important;
}
}Like the two issues mentioned previously, HTML entities seem to be tripping PostCSS up. |
|
@wongjn any idea how can we prevent these types of classes from being written by our developers? I mean, we literally create hundreds of websites for customers and many developers are working. We don't know what utilities they use. We need to somehow find out what can cause problems. Can I prevent all |
|
I don't think developers are writing that class name. It would most likely be from |
|
@Nefcanto Mind sharing your Vite config? I suppose that something is converting |
|
@philipp-spiess, sure: |
|
One thing I noticed was that this error is thrown when we have line breaks between the classes in a template string like this (Nuxt 3, simplified code): <script setup>
import { twMerge } from 'tailwind-merge'
const resolvedClasses = computed(() => {
const defaultClasses = `
text-2xl
bg-red-400
` // <-- this causes the error
return twMerge([
// ...
defaultClasses,
])
})
</script>
<template>
<div :class="resolvedClasses" />
</template>It was hard to find this in a big codebase. To solve this I just put the classes in a single line and the error was gone. <script setup>
import { twMerge } from 'tailwind-merge'
const resolvedClasses = computed(() => {
const defaultClasses = 'text-2xl bg-red-400' // <-- this solves the error
return twMerge([
// ...
defaultClasses,
])
})
</script>
<template>
<div :class="resolvedClasses" />
</template>
|
|
the complex of css cause this issue, error cause by user try to use weird class so parser failed at production (postcss-parser). I have successful debug here: step 1: verbose build
verbose show that issue at postcss, try to overide it to show detail token step 2: Ctrl + Click at each function to see where to put logsthis will open this file: step 3: add debug codeoutput: the error show at the bug have: Thanks claude AI to help write console log (:v) |
|
@hiepxanh the point is that we can't do that every time we see this error. The logs you set there are ephemeral. They won't be there next time you run a new container (we develop inside containers). But for one time, that's an interesting approach. |
|
@adamwathan, could you please persuade the PostCSS team to clarify their logs? I asked there: postcss/postcss#2014 but the communication did not go smoothly. As @hiepxanh showed above, the |
|
As a Nuxt3 user I started encountering this error once I upgrade to @nuxt/ui@3.0.0-beta.2, which includes the Tailwindcss 4.0.x release as a dependency. My main.css has the following lines to embed the tailwindcss: This results in the following compilation error: Following some issues discussion (nuxt/ui#3374), it was suggested to change the main.css to the following form: This also fails, but if the fourth line is commented out then no compilation error from postcss: So I guess there is an error in the utilities layer that needs to be fixed. |
|
Fixed by updating I resolved the issue by ensuring that my Here’s what I updated: // tailwind.config.js
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}", // adjust to your project structure
],
theme: {
extend: {},
},
plugins: [],
}Also, avoid dynamic class names like Hope this helps! |
After upgrading to Tailwind 4, I'm getting this error in my Qwik + Tailwind app:
The problem is that it does not tell us where. As a developer I need to know some info related to MY code in order to be able to track the problem and solve it.
Please give us some info related to our code in this error.
The text was updated successfully, but these errors were encountered: