Nested CSS

Enable Nested CSS#

In WordPress admin:

1. Open TemplateX.
2. Go to Settings, then Development.
3. Turn on Enable Nested CSS.
4. Wait for the autosave toast to confirm the setting.

Restart development after saving:

npm run dev

Or:

bun run dev

Nested CSS does not add a package to the theme, so you do not need to run npm install or bun install.

Write Nested Selectors#

Keep writing .css files in resources/css:

.card {  border: 1px solid #ddd;  padding: 1rem;  h2 {    font-size: 1.25rem;  }  &:hover {    border-color: #999;  }}

TemplateX flattens the nested rules before Vite builds the stylesheet.

.card {  border: 1px solid #ddd;  padding: 1rem;  h2 {    font-size: 1.25rem;  }  &:hover {    border-color: #999;  }}

.card {  border: 1px solid #ddd;  padding: 1rem;}.card h2 {  font-size: 1.25rem;}.card:hover {  border-color: #999;}

Use Media Queries#

Nested media queries are supported:

.hero {  display: grid;  gap: 2rem;  @media (min-width: 760px) {    grid-template-columns: 1.2fr 0.8fr;  }}

With Tailwind#

Nested CSS skips Tailwind entry stylesheets so Tailwind can own its generated layers.

If your main.css contains Tailwind directives, put nested rules in a separate CSS file without Tailwind directives and import it:

@import "tailwindcss";@plugin "@tailwindcss/typography";@source "../views";@import "./components.css";

.feature-card {  h2 {    font-size: 1.5rem;  }}

Why It Helps#

Nested CSS keeps related selectors together while staying in normal CSS. It is useful for small components, layout sections, hover states, and media-query variants that would otherwise be spread across the file.

Turning It Off#

Disabling Nested CSS removes the TemplateX-managed Vite helper. Plain CSS keeps working, but nested selectors must be flattened.