What is Tailwind?
Tailwind is a functional CSS framework that is ergonomic to use, but low level enough to make it fully customizable. Y...
For further actions, you may consider blocking this person and/or reporting abuse
Great article, just one small error I noticed.
In your
package.jsonfile:You omitted the
srcpath fortailwind.cssand this will cause an error when starting the appInstead of this:
"build:styles": "postcss tailwind.css -o src/styles.css",Do this:
"build:styles": "postcss src/tailwind.css -o src/styles.css",This shoud be corrected in the article :)
Very good catch :D
TIL:
pre<scriptname>andpost<scriptname>. Thanks for the post @hagnerdnice post matt! Loving tailwind.
etting you know there a typo on this line
yarn add -D tailwdincss ...🤦♂️ Thanks! Fixing now.
===I did everything except adding these:
"scripts": {
//... place these after the four scripts created by CRA
"build:styles": "postcss tailwind.css -o src/styles.css",
"prebuild": "npm run build:styles",
"prestart": "npm run build:styles"
}
===If I do just that then nothing works. Shows plain html
===But
===If I do add those scripts, and do npm start I get this error:
Input Error: You must pass a valid list of files to parse
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! setting-up-tailwind@0.1.0 build:styles:
postcss tailwind.css -o src/styles.cssnpm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the setting-up-tailwind@0.1.0 build:styles script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\tmp\nodejs\npm-cache_logs\2019-10-17T19_50_22_634Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! setting-up-tailwind@0.1.0 prestart:
npm run build:stylesnpm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the setting-up-tailwind@0.1.0 prestart script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\tmp\nodejs\npm-cache_logs\2019-10-17T19_50_24_096Z-debug.log
===I've tried this multiple times over and over and the same keeps happening
The error says that tailwind.css could not be found. There should be src/ before tailwind.css.
"scripts": {
//... place these after the four scripts created by CRA
"build:styles": "postcss src/tailwind.css -o src/styles.css",
"prebuild": "NODE_ENV=production npm run build:styles",
"prestart": "npm run build:styles"
},
Hey Parsa, do you mind throwing up a github repo with the issue you are having? It would help me locate what the issue might be.
Hey buddy,
check your package.json and double check you are doing npm run in all cases
I had this exact error and replaced yarn with NPM without thinking so was doing npm build:styles :facepalm:
Thanks
@applyis not working inside component styles.css. Is there a workaround for this?Classes set up with apply should be created in the tailwind.css file after the
@tailwind components;and before the@tailwind utilities;Read more about it on the Tailwind docs.
it shows the following error.
yarn run v1.19.2
$ yarn build:styles
$ postcss tailwind.css -o src/styles.css
Input Error: You must pass a valid list of files to parse
error Command failed with exit code 1.
info Visit yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit yarnpkg.com/en/docs/cli/run for documentation about this command.
Thanks for the great article :)
Thanks a lot! Great post very clear and helpful.
Dude this post is amazing, helped me get up and running in minutes. Kudos!
Great Post! Thanks.
But what about watching tailwind.css to rebuild it on change?
That's a good question. I don't find myself frequently changing the tailwind.css file. You can pass a
-wflag to postcss-cli in this case.Thank you
Great! This one is good tutorial