FAQ: TailwindCSS v4 New Syntax and Its Compatibility with Other Systems

[rozsazoltan]

Hi everyone! I'm more active on Stack Overflow. I've been using TailwindCSS for years and closely following the community. With the introduction of v4, I noticed a lot of chaos; many breaking changes have made previously well-established workflows obsolete.

However, despite the changes, the new features in TailwindCSS v4 are great and genuinely simplify our work in many areas.

I'd like to summarize some of the available Q&A references here in the TailwindCSS repository as well. I can only focus on the answers I've provided here, but there are many other useful Q&A discussions available; especially from Wongjn.

TailwindCSS with other systems

• How to use TailwindCSS v4 & Vite without PostCSS
• Shadcn with TailwindCSS v4
• Next Themes with TailwindCSS v4
• DaisyUI with TailwindCSS v4
• Rspack with TailwindCSS v4
• Aceternity UI with TailwindCSS v4
• Astro with TailwindCSS v4
• Storybook with TailwindCSS v4
• {Create-React-App or Next-Create-App or Vite-React-App} with TailwindCSS v4
• TailwindCSS v4 with PurgeCSS

Breaking changes

• New CSS-first configuration option in v4
• TailwindCSS v4 is backwards compatible with v3
• Separated PostCSS plugin for TailwindCSS
• Removed @tailwind directives
• Deprecated: Sass, Less and Stylus preprocessors support
• Problem installing TailwindCSS when run "npx tailwindcss init -p" command
• Automatic Source Detection from TailwindCSS v4

Dark mode

• TailwindCSS dark mode can't change or add class="dark" tag on production
• Change CSS custom property value depending on theme in Tailwind v4
• How to disable dark mode in TailwindCSS 4
• How to use custom color themes in TailwindCSS v4
• TailwindCSS: How to do a light mode only modification?

Interesting facts

• TailwindCSS @screen how to use
• How can I convert print: and screen: to the new @theme style?
• Specially @custom-variant examples: How to access all the direct children of a div in Tailwind CSS?
• Can I apply multiple classes to children at once in TailwindCSS

IDE - VSCode

• TailwindCSS v4 - Unknown at rule @plugin, @custom-variant, @theme in global.css
• Auto-completion and suggestions not working with TailwindCSS v4