Topic summary
A user seeks guidance on integrating Tailwind CSS into their Shopify theme.
Solutions Provided:
-
Open-source theme option: One contributor recommends using the Trellis Commerce Tailwind starter theme based on Shopify Dawn, available on GitHub.
-
Manual setup steps: Another user provides a detailed implementation guide:
- Initialize npm and install Tailwind CSS as a dev dependency
- Generate Tailwind config file and customize it to target Shopify’s
.liquidfiles (layout, sections, snippets) - Create a
src/tailwind.cssfile with Tailwind directives - Set up
.shopifyignoreto excludenode_modules, CSS files, and package files - Run the Tailwind CLI build command to compile CSS
- Use watch mode for development
The discussion includes a screenshot (likely showing implementation results) and links to GitHub resources. Both approaches offer working solutions depending on whether the user prefers a pre-built starter theme or custom integration.
Check out our tail wind open source theme! https://github.com/TrellisCommerce/shopify-dawn-tailwind-starter-base
1: npm init -y
2: npm install -D tailwindcss
3: npx tailwindcss init
4: customized the tailwind.config.js file -
/*** @type *{import(‘tailwindcss’).Config} */
module.exports = {
content: [
‘.layout/*.liquid’,
‘.section/*.liquid’,
‘.snippets/*.liquid’
],
theme: {
extend: {},
},
plugins: ,
}
5: create a folder and inside file called - src → tailwind.css
6: write the -
@Tailwind base;
@Tailwind components;
@Tailwind utilities;
Code inside the tailwind.css file
7: Firstrun this command - npx tailwindcss -i ./src/input.css -o ./src/output.css
8: Create .shopifyignore file
Write →
package.json
package-lock.json
css
node_modules
9:Then → npx tailwindcss -i ./src/tailwind.css -o ./assets/main.css --watch
Done
or Visit my github profile