csstailwind-csstailwind-css-4

How to use nested CSS classes in Tailwind CSS v4.1 with CLI compiler (no tailwind.config.js support)

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?

Solution

  • 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.