Installing Tailwind.css in Shopify for local theme development for Windows
technology
What is Tailwind css:
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Unlike other frameworks, it does not come prebuilt with classes to add to the HTML tags. When used in combination with React, Tailwind can help developers create dynamic and responsive user interfaces efficiently.
Requirements:
- Node js
- VSCode editor
- chocolatey, themekit and shopify [if not already installed check the link : Chocolatey, Themekit and Shopify]
Follow the steps below to install tailwind.css inside shopify installation:
- Navigate to the folder where you installed shopify previously in VSCode. Open a new terminal. Run the codes below one by one at a time:npm init -y
npm install -D tailwindcss postcss-cli autoprefixer
npx tailwindcss ini
Tailwind.css will get installed.
- create a file in root postcss.config.js and add the lines below:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
- from the root folder, open the file tailwind.config.js, add the below codes in the content section:
content: [
'./sections/*.liquid',
'./layout/*.liquid',
'./templates/*.liquid',
'./snippets/*.liquid'
],
- Create a folder "src" in root. Create a file main.css inside the src folder. Add the code below in the main.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
Tailwind keyword might show as Problem in VSCode but it can be ignored.
- Go to assets folder and delete the file application.css.liquid
Now run the code below:
npx tailwindcss build -i src/main.css -o assets/application.css.liquid
Here input is main.css file and the output is generated to application.css.liquid file. On running the code above, application.css.liquid file will now have all the tailwind.css classes ready to use.
- Open package.json file, replace the code inside "scripts":
"scripts": {
"build" : "npx tailwindcss build -i src/main.css -o assets/application.css.liquid && theme deploy --allow-live"
},
- Go to layout > theme.liquid
add the code below in the <head> section.
{{ "application.css" | asset_url | stylesheet_tag }}
- run the code:
npm run build
There will be errors because of missing sections - those can be ignored for now.
- Run the code below:
watch theme --allow-live
- Go to theme.liquid and add the code below - inside <body>:
<h1 class="text-blue-500 uppercase text-3xl">Hello World</h1>
As 'theme watch' is already running. This will update the changes in the shopify store theme.
- testing
Go to online store > themes > theme_name > click on the three dots > Preview
OR
Online store > themes > view your store
The new changes will now reflect in your page. Tada!!
To download a free HTML template built with Tailwind.css - click here!!
Related Articles
Related
Themes or Templates collection
Explore Now!
