https://github.com/brandtam/dawn-tailwind-shopify-theme
An opinionated way to setup a working Shopify theme using TailwindCSS with Dawn as a starting point. Vite does the Tailwind magic in real time.
https://github.com/brandtam/dawn-tailwind-shopify-theme
shopify shopify-theme tailwindcss vite
Last synced: about 1 year ago
JSON representation
An opinionated way to setup a working Shopify theme using TailwindCSS with Dawn as a starting point. Vite does the Tailwind magic in real time.
- Host: GitHub
- URL: https://github.com/brandtam/dawn-tailwind-shopify-theme
- Owner: brandtam
- License: other
- Created: 2023-10-04T23:30:20.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-04T23:36:18.000Z (almost 3 years ago)
- Last Synced: 2025-04-01T23:23:51.044Z (over 1 year ago)
- Topics: shopify, shopify-theme, tailwindcss, vite
- Language: Liquid
- Homepage:
- Size: 910 KB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Dawn + Tailwind CSS
Add `node_modules` to `.gitignore`
```bash
echo "node_modules" >> .gitignore
```
Init a new pnpm project and install [Vite](https://vitejs.dev/) and [Tailwind CSS](https://tailwindcss.com/).
```bash
pnpm init && pnpm i -D vite tailwindcss postcss autoprefixer
```
Add config files and shopifyignore
```bash
touch vite.config.js postcss.config.js tailwind.config.js tailwind.css .shopifyignore
```
---
Add the following to `tailwind.css`
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
---
Add the following to `tailwind.config.js`
```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`
```js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
```
---
Add the following to `vite.config.js`
```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
```json
"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.
```bash
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 }}`.
```liquid
{{ 'styles.css' | asset_url | stylesheet_tag }}
```
### Development
Run the Shopify theme watcher in one terminal
```bash
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.
```bash
pnpm run watch
```