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.

Guides

• Tailwind CSS Standalone
• Tailwind CSS with React.js
• Tailwind CSS with Vue.js
• Tailwind CSS with PHP (without any framework)

CSS-first

• How to override theme variables in TailwindCSS v4 - @theme vs @layer theme vs :root
• When should I use * and when should I use :root, :host as the parent selector?
• Should I use @theme or @theme inline?
• How to use custom color themes in TailwindCSS v4

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
• Adding an external source or a package from within node_modules for detection

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

Custom namespaces and utilities

• Extended transition-* with custom --transition-* namespace
• clip-box-* utility
• text-stroke-* utility
• Utilities for writing-mode
• clipcirc-* utility
• h-{screen,dvh,lvh,full}-minus-* and w-{screen,full}-minus-* utilities
• bg-position-{x,y}-* utilities
• Utilities for Bootstrap-like GRID system
• animate-{repeat,duration}-* utilities
• --border-style-* namespace
• bg-opacity-* utility no longer exists as of v4 - how could it still be created?

IDE - VSCode

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