tailwind-csstailwind-css-4

TailwindCSS v4 does not generate certain styles when using prefix

I am using a prefix to distinguish my styling from 3rd party clases. When not using the prefix, this works fine:

fixed h-[5px] bg-green top-0 left-0 z-1000

When using the prefix top and left styles are not getting generated in the tailwind css file at all while other are fine.

tw:fixed tw:h-[5px] tw:bg-green tw:top-0 tw:left-0 tw:z-1000

Update: I am using @tailwind and tailwind.config because this is the only way I was able to shake off all the unnecessary tailwind styles. There is a 3rd party element using class outline (and a few more basic tailwind's class names) and tailwind thinks it is it's style so tailwind generates outline style in it's css file which messes up the interface.

I have tried using @import "tailwindcss" prefix(tw); and other combinations but this way all the trash styles are present in the generated css which messes things up.

index.css content:

@config "../../tailwind.config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ... */

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  mode: "jit",
  prefix: "tw",
  content: ["./src/**/*.{js,jsx,ts,tsx,css}"],
  theme: {
    colors: {
      'green': '#4287f5'
    }
  }
}
Solution

  • Import

    As of TailwindCSS v4, the @tailwind directive has been removed. So none of those declarations are needed anymore. Instead, you only need a single import at the top of your CSS file:

    @import "tailwindcss";

@config "../../tailwind.config.js";

    Prefix

    If you want to use a prefix, you need to include the import again at the top of the file, like this:

    @import "tailwindcss" prefix(tw);

@config "../../tailwind.config.js";

    Among my other observations, I'd note that the mode: "jit" setting in the config file has been deprecated since TailwindCSS v3, as JIT mode has been the default since then.

    Starting from v4, if you're using the legacy JavaScript configuration, you no longer need to define prefix: "tw" in the config file either; as mentioned, this should now be specified during import.

    Also, from TailwindCSS v4 onward, you don't need to define the content option; v4 automatically discovers your source files (excluding paths listed in .gitignore).

    Note: Make sure that the files listed in the .gitignore are not considered by TailwindCSS when compiling the CSS. It is possible to override the gitignore using the @source directive (e.g., if you want to exclude node_modules but need some class names from one or two packages). See more details here: TailwindCSS v4 does not apply styles in packages/components.

    So if you still want to use the tailwind.config.js, this is all you need to keep from the current configuration:

    /** @type {import('tailwindcss').Config} */
export default {
  theme: {
    colors: {
      'green': '#4287f5'
    }
  }
}

    If you don't want to overwrite all the original TailwindCSS colors (e.g., bg-red-500, etc.) and just want to extend them with your own, use the extend property like this:

    /** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        'green': '#4287f5'
      }
    }
  }
}

    CSS-first configuration (recommended from v4)

    As of v4, you don’t actually need a tailwind.config.js anymore. So you can leave it out and use the new CSS-first configuration instead. Based on your current config file, it would look like this:

    @import "tailwindcss" prefix(tw);

@theme {
  --color-green: #4287f5; /* extend default colors with new green, what can use as e.g. tw:bg-green */
}

    Note: In this case, there's no need for the tailwind.config.js anymore!

    Of course, if you don't need a prefix after all, then use it like this:

    @import "tailwindcss";

@theme {
  --color-green: #4287f5; /* extend default colors with new green, what can use as e.g. bg-green */
}

    More breaking changes from v4

    Since v4, several breaking changes have been introduced; it's worth reviewing all of them.