Why Add Tailwind CSS to Shopify?
Tailwind CSS is a utility-first CSS framework that makes it faster and easier to build custom UI directly in your HTML. Here’s why it’s great for Shopify:
Step-by-Step: How to Add Tailwind CSS to Shopify
💡 You can’t use Tailwind directly via CDN with all of its features (especially @apply, custom builds, etc.). So it’s recommended to compile Tailwind via a build process, then add the output CSS to Shopify.📌 Option 1: Add Tailwind CSS using Shopify + ThemeKit + Tailwind CLI
- Step 1: Set Up Your Local Development Environment
If you haven't already, set up Shopify's local dev tools:
npm install -g @shopify/cli
shopify theme init- Step 2: Install Tailwind CSS
Inside your theme folder:
npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss initThis creates tailwind.config.js and postcss.config.js.
- Step 3: Create Your CSS File
Create a CSS file like tailwind.css in your assets folder:
/* assets/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;- Step 4: Update postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}- Step 5: Build Tailwind CSS
Add a script to your package.json:
"scripts": {
"build:css": "tailwindcss -i ./assets/tailwind.css -o ./assets/tailwind.css --minify"
}
Then run:
npm run build:cssThis generates tailwind.css with Tailwind classes.
📌 Option 2: Basic CDN Method (Quick & Limited)
For very basic usage/testing, you can add this CDN in your theme.liquid <head>:
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">⚠️ This method doesn't support PurgeCSS or Tailwind's advanced features.
✨ Final Step: Use Tailwind in Your HTML
Now you can write Tailwind classes directly in your Shopify Liquid files, like:
<div class="bg-blue-500 text-white p-4 rounded">
Hello Tailwind in Shopify!
</div>Things to Keep in Mind
purge in production.
