Skip to content
loading...

Setting up Tailwind With create-react-app

Matt Hagner on August 02, 2019

What is Tailwind? Tailwind is a functional CSS framework that is ergonomic to use, but low level enough to make it fully customizable. Y... [Read Full]
markdown guide
 

Great article, just one small error I noticed.
In your package.json file:
You omitted the src path for tailwind.css and this will cause an error when starting the app
Instead 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 :)

 
 

nice post matt! Loving tailwind.

etting you know there a typo on this line
yarn add -D tailwdincss ...

 
 

===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.css
npm 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:styles
npm 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:

 

TIL: pre<scriptname> and post<scriptname>. Thanks for the post @hagnerd

 

Thanks a lot! Great post very clear and helpful.

 

Dude this post is amazing, helped me get up and running in minutes. Kudos!

 

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.

 

@apply is 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.

 
 

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 -w flag to postcss-cli in this case.

code of conduct - report abuse