Dawn + Tailwind CSS

Add node_modules to .gitignore

echo "node_modules" >> .gitignore

Init a new pnpm project and install Vite and Tailwind CSS.

pnpm init && pnpm i -D vite tailwindcss postcss autoprefixer

Add config files and shopifyignore

touch vite.config.js postcss.config.js tailwind.config.js tailwind.css .shopifyignore

---

Add the following to tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

---

Add the following to tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
	prefix: 'tw-', // Avoid conflicts with Shopify's CSS. Make it whatever you want.
	content: [
		"./**/*.{js,json,liquid}", // updated to include theme files 
	],
	theme: {
		extend: {},
	},
	plugins: [],
}

---

Add the following to postcss.config.js

module.exports = {
	plugins: {
		tailwindcss: {},
		autoprefixer: {},
	}
}

---

Add the following to vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
	build: {
		outDir: 'assets',
		emptyOutDir: false,
		minify: false,
		rollupOptions: {
			input: 'tailwind.css',
			output: {
				dir: 'assets',
				assetFileNames: 'styles.css',
			},
		},
	},
});

---

Add scripts to package.json.

Make sure to replace yourstore.myshopify.com with your store's url

"scripts": {
	"dev": "shopify theme dev -s yourstore.myshopify.com",
	"build": "vite build --minify",
	"watch": "vite build --watch"
}

---

Add the following to .shopifyignore.

In this example the lock file is pnpm's pnpm-lock.yaml but you can use yarn.lock or package-lock.json as well depending on the package manager you use.

package.json
pnpm-lock.yaml

Usage

In order to use Tailwind CSS in your theme you need to import the styles.css file in your theme.liquid file directly below {{ 'base.css' | asset_url | stylesheet_tag }}.

{{ 'styles.css' | asset_url | stylesheet_tag }}

Development

Run the Shopify theme watcher in one terminal

pnpm run dev

In another terminal run the Vite server to watch for changes so that it can update the assets/styles.css file in real time.

pnpm run watch