Can't add tailwindcss to an existing Shopify store (Theme Dawn) #8552
Unanswered
GUIGUI69PRO
asked this question in
Help
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Firstly, I clone Dawn Theme locally :
shopify theme init --clone-url https://github.com/Shopify/dawn.git
Then I begin the installation :
npm install -D tailwindcss
npx tailwindcss init
The file tailwind.config.js appear. I complete like that :
/** @type {import('tailwindcss').Config} /
module.exports = {
content: [
'./config/.json',
'./layout/.liquid',
'./assets/.liquid',
'./sections/.liquid',
'./snippets/.liquid',
'./templates/.liquid',
'./templates/.json',
'./templates/customers/*.liquid',
],
theme: {
extend: {},
},
plugins: [],
}
Then, next step.
I create a file in assets named app-tailwind.css in wich in put this :
@tailwind base;
@tailwind components;
@tailwind utilities;
Then
npx tailwindcss -i ./assets/app-tailwind.css -o ./assets/app.css --watch
A new file app.css appear in assets.
Then I put my css into my theme.liquid
AND THEN when I create a new section section-test.liquid TailwindCss doesn't work ...
After a shopify theme serve and customize the website with putting the section online, this is what appear
Or, sometimes, it appears like that, smaller than wanted :
Thanks so much
Beta Was this translation helpful? Give feedback.
All reactions