2

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'
    }
  }
}
Improve this question
4
  • Could you share your configuration, specifically how you set up the prefix? So the issue can be reproduced. Now can't reproduce: play.tailwindcss.com/BsMCCUPzFR and play.tailwindcss.com/iKqWzq8Rg0 - My result: i.sstatic.net/M64JGnJp.png (Note: Right, bg-green doesn't exist by default, so I used something else instead. Arbitrary values like 5px do work, but they’re not as visually noticeable for a minimal reproduction as something like h-32 w-32.) Commented Apr 11 at 14:39
  • If the issue can't be reproduced in a minimal example, then the problem is likely within your project. You can inspect your div using F12 to see why tw:top-0 and tw:left-0 aren't being applied. If I had to guess, I'd say it’s a specificity issue. Commented Apr 11 at 14:45
  • it's not a question of not being applied, it's a question of it not being generated in the tailwind's css file at all even though all the mentioned styles are being applied to the same element without any conditions. I will update Commented Apr 11 at 16:56
  • Thanks for the update, it's clear now. Well, let me quickly summarize: the import should be done at the top of the file; there’s no need for @tailwind; @config is a backward solution, but it's no longer mandatory to use a config file (I suggest reviewing the links I attached). I hope the answer was helpful. Commented Apr 11 at 17:21

1 Answer 1

Reset to default
3

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.

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

6 Comments

Yes, this generates top/left styles. But generated css also contains many styles I do not use. How do I remove all unused styles with this new config approach?
Firstly, make sure you have a .gitignore file and that you're excluding both your node_modules and dist folders! - This is important because TailwindCSS detects every js, html, vue, ... file, so unfortunately it can also include your compiled project from the dist folder in a new result. If you don't want to list an unnecessary path in the gitignore because you’re using it with git, but still want to exclude it from TailwindCSS detection, use the @source not... (Solution #2 in linked answer) directive instead.
Secondly, we discussed this in another question; TailwindCSS adds some variables and colors to the generated code, which I think could also be the answer to your new issue: How to remove unused colors during build? and another: How to remove unused TailwindCSS v4 classes when building a library with Vite?
It generates a bunch of stuff, for example file-selector-button style under @layer base. Something I do not anywhere...
I believe that by solving the current question, you've managed to arrive at your next one. Go ahead and open a new question, and include your folder structure, whether you have a .gitignore file, how you're using Tailwind in the end, and what the expected result would be.
|

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.