Prashant Ardeshana

Posted on Aug 31 • Edited on Sep 12

How to setup Shopify Vite with Tailwind CSS.

#npm #vite #tailwindcss #shopify

Follow these steps to set up Shopify with Vite and Tailwind CSS for a modern development workflow.

Step 1: Clone the Dawn Repository

First, clone the Dawn theme repository from Shopify using the following command:

git clone https://github.com/Shopify/dawn

Step 2: Check Software Versions

Ensure you have the required software versions by checking:

npm -v
node -v
shopify version

Step 3: Install Tailwind CSS and PostCSS

Install Vite, Tailwind CSS, and PostCSS using the following command:

npm install vite tailwindcss postcss autoprefixer --save-dev

Additionally, install npm-run-all to manage multiple npm scripts concurrently:

npm install npm-run-all --save-dev

You can also use a combined installation command:

npm install autoprefixer npm-run-all postcss tailwindcss vite vite-plugin-shopify --save-dev

Step 4: Create Frontend Entry Points

Create the frontend/entrypoints folder and add two files: main.css and main.js.

main.css

Add the following code:

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

main.js

Add the following code:

import 'vite/modulepreload-polyfill';

Step 5: Create Configuration Files

In the root directory, create the following files using these commands:

touch tailwind.config.cjs
touch postcss.config.cjs
touch vite.config.js
touch .shopifyignore
touch jsconfig.json

Step 6: Configure Tailwind

Add the following code to tailwind.config.cjs:

/** @type {import('tailwindcss').Config} */

let plugin = require('tailwindcss/plugin');

module.exports = {
  content: ['./**/*.liquid', './frontend/**/*.{js,ts,jsx,tsx}'],
  safelist: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

Step 7: Update .shopifyignore

Add the following entries to .shopifyignore:

package.json
jsconfig.json
package-lock.json
frontend/
vite.config.js
tailwind.config.cjs
postcss.config.cjs
.gitignore
.prettierignore
.prettierrc.json
.theme-check.yml
.vscode/
*.md
translation.yml
node_modules
.git/
.github/
assets/.vite

Step 8: Update .gitignore

Add the following entries to .gitignore:

node_modules
.ruby-version

Step 9: Configure PostCSS

Add the following code to postcss.config.cjs:

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

Step 10: Configure Vite

Add the following code to vite.config.js:

// vite.config.js
import { defineConfig } from 'vite';
import shopify from 'vite-plugin-shopify';

export default defineConfig({
  plugins: [shopify()],
  build: {
    emptyOutDir: false,
  },
});

Step 11: Update package.json

Add or modify the following code in package.json:

{
  "name": "my-code-magic",
  "version": "0.1.0",
  "license": "MIT",
  "keywords": [],
  "type": "module",
  "scripts": {
    "dev": "run-p -sr \"shopify:dev -- {@}\" \"vite:dev\" --",
    "deploy": "run-s \"vite:build\" \"shopify:push -- {@}\" --",
    "shopify:dev": "shopify theme dev",
    "shopify:push": "shopify theme push",
    "vite:dev": "vite",
    "vite:build": "vite build"
  },
  "devDependencies": {
    // Your installed packages here
  }
}

Step 12: Configure JavaScript Paths

Add the following code to jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["frontend/*"],
      "~/*": ["frontend/*"]
    }
  }
}

Step 13: Update Liquid Templates

Add the following snippet before the content_for_header in your Liquid templates:

{%- liquid
  render 'vite-tag' with 'main.css'
  render 'vite-tag' with 'main.js'
-%}

Step 14: Run the Development Server

Install dependencies and start the development server with hot-reload:

npm run dev -- --store=store-name --live-reload hot-reload

Step 15: Deploy to Shopify

Deploy your theme to Shopify:

npm run deploy -- --store=store-name

Step 16: Target a Specific Theme by ID

To target a specific theme by its ID during deployment, use the following command:

npm run deploy -- --store=store-name -t131234567890

Summary

This guide covers the necessary steps to set up a Shopify theme using Vite and Tailwind CSS. By following these instructions, you'll benefit from a modern development workflow with faster builds, live reloading, and an improved developer experience.

Key Points: