2

I'm using Tailwind CSS v4.1 with the Tailwind CLI compiler (no tailwind.config.js support in this version). I want to understand the proper way to write nested classes (similar to SCSS nesting or @apply usage) in this setup.

I installed Tailwind v4.1 via npm and tried running it with the CLI:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Also, I tried writing nested classes using @layer and @apply, but Tailwind throws errors like Unknown at rule @apply.

@layer components {
  .navbar-menu-link {
    @apply block 
    
    .navbar-menu-child {
      @apply flex
    }
  }
}

Why isn't the CSS nesting code I wrote working?

Improve this question
8
  • 1
    Your question is overly unfocused and contains too many sub-questions that are not related to each other. >> (1) The warning message points to an IDE error, which doesn't know how to handle @apply since it doesn't exist in native CSS. That, I believe, is the main issue. (See more: solution) >> (2) The other, separate question is why npx tailwindcss does nothing: it’s because you need npx @tailwindcss/cli. (See more: solution) Commented Sep 3 at 6:01
  • 1
    (3) The rest of your questions are not really related to this, but here are a few resources: How to use custom color themes or How to switch to a CSS-first configuration in Tailwind CSS v4 and above Commented Sep 3 at 6:01
  • 1
    Ultimately, don't rely on AI constantly, because it can lead to the chaos mentioned in the question. Use sources from Stack Overflow, the Docs, or GitHub Discussions. They all contain excellent explanations and answers from real people. Deepen your knowledge, especially when upgrading major versions with so many breaking changes. Happy coding! Commented Sep 3 at 6:30
  • 1
    There isn't such a thing, since this is a native CSS feature, not provided by TailwindCSS. By the way, make sure to use semicolons in your CSS, and you won't have any issues. - developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting - See my answer below. The points mentioned in the question highlight several errors, which I've explained in the answer. If you follow my guidance, your code will work correctly. Commented Sep 3 at 7:58
  • 1
    If you have a specific piece of non-working code, I suggest posting it as a new question. Include the CSS and HTML that aren't producing the expected results, and describe what the expected outcome is. This will make the question highly focused and easier for me to answer. There are no universally "recommended" or "best" ways - everything depends on your goal. In this case, please make sure to post a new question so that the time I spent writing this answer for current question here isn't wasted. Commented Sep 3 at 8:03

1 Answer 1

Reset to default
2

Unknown at rule

You don't mention where you're seeing this error message. It's important to note that there are significant differences between an error and a warning.

[WARNING] Unknown at rule @apply

This message is coming from VSCode or another IDE, since it doesn't recognize TailwindCSS's custom syntax. To fix this in VSCode, you need to use the official TailwindCSS IntelliSense extension:

Other related:

Tailwind CLI not working

You said you installed the TailwindCSS v4 CLI, but the command you're using looks like it's for v3. Starting with v4, it should look like this:

npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch

Sass is not supported

I see you tagged your question with Sass. TailwindCSS v4 officially does not support Sass or other preprocessors. See more here:

Oh no, what will I do without tailwind.config.js

Also, v4 doesn't require a tailwind.config.js, so I can't really interpret the first part of your question. Use CSS-first configuration:

Is using @apply really necessary?

Confession: The apply feature in Tailwind basically only exists to trick people who are put off by long lists of classes into trying the framework.

You should almost never use it 😬

Reuse your utility-littered HTML instead.

Source: @adamwathan, #2, #3

Starting with v4, the TailwindCSS has a clear and firm stance: whenever possible, external use of @apply should be avoided, and instead you should rely on native utilities and variables.

The primary goal of TailwindCSS is to eliminate the need for writing custom CSS when it comes to styling. When you declare a component, you inject the styling directly into the HTML class attribute within the component file. In many cases, this makes the use of @apply excessive and unnecessary.

CSS nesting with TailwindCSS

How to use nested CSS classes in Tailwind CSS v4.1

The additional question mentioned in the title is absurd and unanswerable. Nesting is a development feature of CSS itself, available without any framework or preprocessor.

TailwindCSS v4 aligns its browser support with the 2023 baseline. This means that everything browsers delivered natively in CSS by the 2023 baseline (or earlier) can be used without increasing the minimum browser versions required by our project due to v4.

CSS nesting is universally available in all browsers from the 2023 baseline onwards, so it will definitely work as long as the visitor meets the minimum browser versions required for v4.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.