tailwind config file has been removed in v4 ??

[smartcraze]

i have freshly installed next file and dont see the tailwind config file also even if i ran the command for init it didnt do .

found that init command is no longer in v4 . so how we will use the custome classes if i have to bind in that ?

[wongjn]

Config is done in the CSS file. Consider checking the documentation website for details.

[DishantGusain]

I also just switched to v4 and instantly ran into a problem. When i start a new project, I create few custom breakpoints depending on design requirements in tailwind.config.ts for example

theme: { extend: { screens: { primaryScreen: "1420px", }, }, }

and use it like

lg:text-xl primaryScreen:text-2xl

This used to work flawlessly but now in the new version when i create same custom breakpoints in CSS file like

@theme inline {
  --breakpoint-primaryScreen: 1420px
}

and use it the same way like

lg:text-xl primaryScreen:text-2xl

It won't work unless i add !important rule like

lg:text-xl primaryScreen:text-2xl!

So if anyone know of any solution please let me know, for now i'll switch back to v3.

[allycody]

@theme doesn't work in tailwind play? is there a way to define your theme in tailwind play v4?

[wongjn]

Write @theme in the CSS tab.

[allycody]

the @ symbol is black so it doesn't seem to be recognized as a valid token.

i'm seeing Cannot apply unknown utility class: font-app-primary when i have

@tailwind components;
@tailwind utilities;

@theme {
  --background: hsla(30, 20%, 96%, 1),
  --app-primary: Lora, Merriweather, Georgia
  --app-secondary: Playfair Display
}

@layer base {
  :root {
    --background-DEFAULT: var(--background);
    --font-app-primary: var(--app-primary);
    --font-app-secondary: var(--app-secondary);
  }
}
  
  
@layer components {
  .custom-text-title { @apply font-app-primary text-foreground font-bold text-2xl; }
}

[allycody]

ok actually i got it mostly working with the following, but i'm seeing Cannot apply unknown utility class: font-bold -- isn't that a built-in tailwind utility class?

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

@theme {
  --color-background: hsla(30, 20%, 96%, 1);
  --font-app-primary: "Lora", "Merriweather", "Georgia";
  --font-app-secondary: "Playfair Display", serif;
  --color-foreground: hsla(25, 60%, 15%, 1);
}
 
@layer components {
  .custom-text-title { @apply font-app-primary text-foreground font-bold text-2xl; }
}

[wongjn]

You need to use v4 syntax:

-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 @theme {

[Vitalii-Kh95]

What about plugins? Let's say I want to add forms plugin. And I use npx @tailwindcss/cli. How can I do that and ensure its integration?

[wongjn]

You can use the @plugin directive to load JavaScript-based Tailwind plugins.

[SeiynJie]

This guy's vid has a better explanation and shows how to use the @plugin directive + other important stuff related to the update like content and stuff.

The NEW CSS-first configuration with Tailwind CSS v4 (No more tailwind.config.js)

[wu0407]

If your project still needs a traditional config file, don't worry. Tailwind hasn't removed support for it entirely. You can manually create tailwind.config.js and link it in your CSS file like this:

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

The corePlugins, safelist, and separator options from the JavaScript-based config are not supported in v4.0. https://javascript.plainenglish.io/no-tailwind-config-js-in-tailwind-css-v4-heres-what-changed-97bb277eeacd

[alex-x-x-x-x]

@wu0407 Thanks for adding that on, I'm still using a tailwind.config.js file in v4, but I generated this file in a really hacky way. There's a lot of conflicting information on whether the config.js file itself is no longer necessary; I think the fact that support for it hasn't yet been deprecated highlights that there may be cases where having that file may be necessary (though those cases may be debatable and there could be other pathways of achieving the same result minus the config file). Admittedly, I am nervous about the day I'll have to remove it from one of my projects entirely as it will definitely break it. lol