What Changed in Tailwind v4
Tailwind CSS v4 represents a ground-up rewrite that fundamentally changes how the framework integrates with your build pipeline. The tailwind.config.js file is gone — configuration now lives directly in your CSS using @theme directives and CSS custom properties. Content detection is automatic through source analysis rather than explicit glob patterns, and the new Oxide engine written in Rust delivers build times that are an order of magnitude faster than v3. For Shopify theme developers, the most impactful change is the zero-config nature of v4: you import Tailwind in your main CSS file with @import "tailwindcss", define your theme tokens as CSS variables, and the engine handles the rest. This pairs exceptionally well with Vite's philosophy of convention over configuration.
Vite Integration for Shopify Themes
Vite serves as both your development server and production bundler. The setup involves creating a frontend/ directory alongside your Shopify theme with an entrypoints/ folder containing your CSS and JavaScript entry files. Vite's config points its build output to the theme's assets/ directory, and you reference the compiled files in Liquid using {{ 'app.css' | asset_url | stylesheet_tag }}. During development, you run Vite's dev server on a local port and configure it to proxy through to the Shopify CLI dev server, giving you hot module replacement for CSS changes without a full page reload. The key Vite configuration options are build.outDir pointing to your theme assets, build.rollupOptions.input mapping your entry files, and build.manifest set to true so you can programmatically resolve hashed filenames in production.
Purge Configuration for Liquid Files
Tailwind v4's automatic content detection scans JavaScript and CSS files by default, but Liquid templates require explicit source configuration. You add a @source directive in your main CSS file pointing to your theme's Liquid directories: @source "../sections/*.liquid", @source "../snippets/*.liquid", @source "../templates/**/*.liquid", and @source "../layout/*.liquid". This ensures that Tailwind's engine detects utility classes used in Liquid markup and includes them in the output. Without these directives, you will end up with a CSS file missing classes that appear in your Liquid code. One subtlety: if you generate class names dynamically in Liquid using string concatenation — like {{ 'bg-' | append: section.settings.color }} — Tailwind cannot detect those at build time. Use a safelist in a @utility block or restructure your Liquid to output complete class strings that the scanner can find.
The HMR Development Workflow
The development experience with Vite and Tailwind v4 in a Shopify theme is remarkably smooth once configured. You run two processes in parallel: shopify theme dev which serves your theme through a local tunnel, and vite dev which watches your source files and serves updated assets. When you edit a Liquid file that changes Tailwind classes, Vite detects the change via the @source paths, regenerates only the affected CSS, and injects it via HMR — no full page reload needed for style changes. JavaScript changes also benefit from HMR when structured as ESM modules. For production builds, running vite build produces minified, tree-shaken CSS and JavaScript with content hashes in the filenames. The total CSS output for a typical Shopify theme using Tailwind v4 lands between 8-15 KB gzipped, compared to the 200+ KB you might see with a traditional CSS framework, because only the utilities you actually use end up in the bundle.
If you want to set up Tailwind v4 with Vite for your Shopify theme, or need help migrating from an older Tailwind or build tool setup, feel free to get in touch. I can help you build a development workflow that is both fast to iterate on and optimized for production.