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:
- 🔧 Faster Development: Write styles inline with HTML classes—no need for custom CSS files.
- 🎨 Fully Customizable: Tailor your design system with ease.
- 📱 Responsive by Default: Built-in responsive design utilities.
- ⚡ Clean & Consistent UI: Enforces design consistency across your storefront.
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
- Shopify’s default styles might conflict — reset them or use utility classes carefully.
- Tailwind increases file size — use
purgein production. - You may need to customize the Tailwind config if you're using Shopify sections/components.
About Jin Alkaid
Jin Alkaid: A Seasoned Shopify Developer
Jin Alkaid is a seasoned Shopify developer with over 10 years of experience in the field. Their expertise lies in creating exceptional online stores that seamlessly blend functionality, aesthetics, and user experience. Whether it’s setting up a new store, optimizing an existing one, or integrating custom features, Jin brings a wealth of knowledge to the table.