Tailwind CSS v4

Q-01 · A style sheet loads Tailwind once: no second @import \"tailwindcss\" nor full import plus split imports

Q-02 · A Vite project integrates Tailwind with @tailwindcss/vite rather than @tailwindcss/postcss

Q-03 · Tailwind's pipeline handles imports, prefixes and nesting: no new postcss-import/autoprefixer/nesting pass, no Tailwind in Sass/Less

Q-08 · @source and source(...) paths resolve from the style sheet to an existing location

Q-11 · Tailwind extensions stay well-formed: top-level @utility/@theme, no empty @utility, only custom properties in @theme

Q-12 · Isolated CSS shares Tailwind's context with @reference instead of missing it or importing it again

Q-25 · The Tailwind Prettier plugin points at the v4 CSS entry (tailwindStylesheet) and loads last

Q-26 · New utilities and directives exist in the installed Tailwind minor (v4.1 features on a v4.0 install)

V3-02 · Style sheets import Tailwind with v4 entrypoints: no new @tailwind, @screen or @variants directive

V3-03 · PostCSS runs Tailwind through @tailwindcss/postcss, never the core tailwindcss package as a plugin

V3-04 · The Tailwind CLI is @tailwindcss/cli: no v3 init workflow, no core-package CLI through a package runner

V3-05 · Configuration stays CSS-first: no new or expanded tailwind.config.* nor @config outside an approved bridge

V3-06 · No corePlugins, safelist or separator in a Tailwind JavaScript configuration, bridge or not

V3-07 · Colors take opacity modifiers: no removed *-opacity-* utility

V3-08 · Flex sizing uses grow/shrink, not the legacy flex-grow/flex-shrink names

V3-09 · Text overflow and box decoration use the current utility names

V3-10 · Arbitrary values name CSS variables explicitly: no bare [--var] shorthand

V3-11 · With a prefix, utilities use the v4 form: prefix first, as a variant (tw:…)

V3-12 · The important modifier goes at the end of a utility (flex!), never at the start

V3-13 · grid-cols/grid-rows/object arbitrary values separate words with underscores, not top-level commas

V3-14 · No import of the removed tailwindcss/resolveConfig

V3-15 · Directional gradients use bg-linear-to-*, not the legacy bg-gradient-to-*

CSS-01 · Ordinary UI is styled with utilities: no new presentation rule or @apply in application style sheets

CSS-02 · Component files follow the same rule: no presentation in CSS modules, component <style> blocks or styled-jsx

CSS-03 · Inline styles carry runtime custom properties only: no ordinary property in style attributes or style props

CSS-04 · Scripts do not bypass utilities: no DOM style writes, injected style sheets or CSS-in-JS presentation

CSS-05 · UI states, queries and themes are utility variants: no new rule under @media/@supports/@container, pseudo-classes or theme selectors

CSS-06 · No new import makes local plain-CSS presentation reachable (JS/TS imports, @import, <link>, <style src>)

Q-05 · A theme token aliasing a variable redefined in a narrower scope uses @theme inline

Q-07 · Class names are complete literals Tailwind can detect: no utility assembled from fragments (bg-${color}-500)

Q-13 · Declarations read theme values with var(--…), not the deprecated theme() function

Q-14 · One class string does not set the same property twice in the same context (flex grid, absolute relative)

Q-16 · Important modifiers (utility!, @import … important) are new only for a documented specificity need

Q-18 · An interactive element that removes its focus outline gets a visible focus style

Q-19 · Resetting scale, rotate or translate uses their own reset utilities, not transform-none

Q-21 · Breakpoint tokens share one unit, so variants sort predictably

Q-22 · A script toggling a dark class or theme attribute has a matching @custom-variant dark in the CSS entry

V3-01 · No package-manager command installs or runs Tailwind CSS major 3 or earlier

V3-01 · A governed package keeps Tailwind CSS major 4: no dependency, override or resolution on major 3 or earlier