Add The Main Files#
Most themes start by loading main.css and main.js from the layout:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="main.css"> <script src="main.js" defer></script></head>main.css maps to resources/css/main.css.
main.js maps to resources/js/main.js.
External URLs are left alone.
Empty JavaScript#
The default main.js can stay empty while you are not writing browser JavaScript.
Empty JavaScript files do not load in production or published frontend output.
Published Asset Versions#
Production builds write an asset version after the final Vite build and CSS optimization steps finish.
Published themes append that version to built CSS and JavaScript URLs, so replacing an existing published theme makes browsers request the new files instead of reusing stale cached files.
Style Blocks In Views#
You can keep small, static styles next to the markup they belong to:
<span class="rating">{{ rating }}</span><style> .rating { display: inline-flex; }</style>TemplateX moves plain static <style> blocks from views and partials into the Vite stylesheet bundle. If the same partial appears many times, the CSS is still bundled once.
If a <style> block has attributes such as media, or contains TemplateX or PHP output, TemplateX leaves it inline because that CSS cannot be safely moved into the shared stylesheet.
Editor Preview CSS#
TemplateX also uses resources/css/main.css for Gutenberg block previews, so basic typography can match the frontend.