Shopify TailwindCSS and daisyui Setup Guide — Build Stunning Themes Fast| Sabbirz

Prerequisites

You have already created a development store on Shopify.
You have set up Shopify's local development environment.

Step-by-step guide

Create a file called .shopifyignore in the root folder of your Shopify project and add the following content:
```
node_modules
package.json
package-lock.json
```
Create a .gitignore file (if you don't already have one) and add node_modules:
```
node_modules
```
Run the following command in the Shopify root folder to create package.json:
```
npm init -y
```

Install TailwindCSS and its Vite plugin:

npm install tailwindcss @tailwindcss/vite

In Shopify's assets directory, create a file named tailwind.input.css and add the following line:
```
@import "tailwindcss";
```
Create a file named shopify.theme.toml with the following content (replace the URL with your store URL):
```
[environments.development]
store = "https://your-store-name.myshopify.com/"
```
Install the concurrently npm package as a development dependency. This package helps run multiple commands simultaneously:
```
npm install concurrently --save-dev
```

Open your package.json file and add the following script inside the "scripts" section:

"dev": "concurrently \"shopify theme dev -e development\" \"npx @tailwindcss/cli -i ./assets/tailwind.input.css -o ./assets/tailwind.output.css --watch\""

Run the development script:
```
npm run dev
```
Open assets/tailwind.output.css and notice that TailwindCSS has purged unused styles and kept only the required ones.
Open your theme.liquid file and before the closing </head> tag, include the generated CSS file:
```
<head>
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  {{ 'tailwind.output.css' | asset_url | stylesheet_tag: preload: true, media: 'all' }}
</head>
```
Note: If you don’t add <meta name="viewport" content="width=device-width, initial-scale=1.0"> in the theme.liquid the tailwindcss media queries WILL NOT WORK.
Everything is set up! Now you can add TailwindCSS classes to your Shopify theme and enjoy the styling magic.

Shopify: How to integrate daisyui with tailwindcss

Install daisyui using
```
npm i -D daisyui@latest
```

Open assets/tailwind.input.css and add daisyui

@import "tailwindcss";
@plugin "daisyui" {
  themes: light --default;
}

To know more about controlling the daisyui theme, navigate to the daisyui website

How to Integrate TailwindCSS with daisyui in Shopify: Step-by-Step Guide

Shopify TailwindCSS and daisyui Setup Guide — Build Stunning Themes Fast

Prerequisites

Step-by-step guide

Shopify: How to integrate daisyui with tailwindcss

Related posts

Three.js Threlte Shadow Cut-Off Issue Explanation and Solution

The Anatomy of a Frappe DocType: Files & Responsibilities

How Shopify Stores Data: A Developer’s "No-Database" Guide 👇

Table of Contents