Migration from 3.4.16 to 4.0.8

[LLEGIT]

What version of Tailwind CSS are you using?

v4.0.8

What build tool (or framework if it abstracts the build tool) are you using?

 "dependencies": {
    "@euroquity/components": "1.0.0",
    "@euroquity/eslint-config": "1.0.0",
    "@euroquity/icons": "1.0.0",
    "@tailwindcss/aspect-ratio": "0.4.2",
    "@tailwindcss/forms": "0.5.9",
    "@tailwindcss/postcss": "4.0.8",
    "tailwindcss": "4.0.8"
  }

"devDependencies": {
   "@babel/preset-typescript": "7.26.0",
   "@testing-library/jest-dom": "6.6.3",
   "@typescript-eslint/eslint-plugin": "6.17.0",
   "eslint-plugin-import": "2.28.1",
   "eslint-plugin-jest": "27.4.3",
   "eslint-plugin-jsx-a11y": "6.8.0",
   "jest": "29.7.0",
   "jest-junit": "16.0.0",
   "postcss": "8.4.49",
   "postcss-cli": "11.0.0",
   "postcss-nested": "7.0.2",
   "prettier": "3.4.2",
   "prettier-plugin-twig-melody": "git+https://github.com/jorismak/prettier-plugin-twig-melody.git",
   "stylelint": "16.11.0",
   "stylelint-config-standard": "36.0.1",
   "stylelint-prettier": "5.0.2",
   "twig": "1.17.1",
   "twig-drupal-filters": "3.2.0",
   "twig-loader": "https://github.com/fourkitchens/twig-loader.git",
   "twig-testing-library": "1.2.0"
 },

What version of Node.js are you using?

For example: v20.12.2

What browser are you using?

Firefox, Chrome

What operating system are you using?

macOs

Reproduction URL

https://github.com/LLEGIT/tailwind_migration_v4

Describe your issue
I wanted to upgrade tailwind to V4 using the upgrade tool npx @tailwindcss/upgrade, the issue is that it create .utilities.css files that produces this error on the yarn build process :

Error: Cannot apply unknown utility class: checked:text-brand

If I comment the line declaring this property, this will produce another error message with the next utility class

[wongjn]

If you'd like Tailwind to handle the CSS @imports, you could remove the url() wrappers from the index.css file. You may or may not need to have @import "tailwindcss"; as the first @import.

---

Edit: trying this myself with the provided repository, this causes a different error:

Error: You cannot `@apply` the `badge-status` utility here because it creates a circular dependency.

I would presume this is due to src/components/01-atoms/badges/badge.css:

@utility badge-status {
  @apply flex items-center justify-center w-full md:w-40 px-10 h-10 rounded-full py-1 border-2;

  &-refused {
    @apply badge-status bg-negative-200 text-negative-500  border-negative-500;
  }

  &-validate {
    @apply badge-status bg-positive-200 border-positive-600 text-positive-600;
  }
}

Where badge-status is applying itself over and over. As an aside, this iseems to be using Sass-style nesting syntax but this won't work with CSS-native nesting.

Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

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

So long term, I would suggest using Tailwind class names directly as much as possible. So instead of writing components in CSS, use the templating system (looks like twig) to create the components needed.

Furthermore, it seems like you're using the PostCSS CLI to run Tailwind. You could consider using Tailwind's CLI (@tailwindcss/cli), since that has minification, etc. all built in.

---

Otherwise, you'd need to use the @reference directive in each CSS file where the error occurs

[LLEGIT]

Hello thank you very much, I will try applying your advices on the usage of @apply and the url() in index.css, it's twig templating yes, also gonna try @tailwindcss/cli 👍