Tailwind CSS v2.0 | Setup & Install React with Tailwind Css

In this video I will be showing you how to Setup & Install React with Tailwind CSS v2.0 using Create React App. Getting your App ready for development. I'll run through creating a component and styles at the component level.

Source Code

Tailwind Tutorial Series

Subscribe and Learn to Code w/ Chu

Video Sections
00:00 Overview
00:40 Install Create-React-App
01:30 Install TailwindCss & NPM Packages
02:48 Create Source Css File
03:25 Tailwind Config File
05:21 PostCss Config File
06:44 Setup NPM Start Scripts
11:47 Setup NPM Build Script
13:46 Add Source Css To React
16:02 Create a Component
20:00 Build For Production
20:55 Outro

Resources
--------------------------------------------------------------

Connect with Code With Chu
--------------------------------------------------------------

[codewithchu]

I updated the repo with cross-env package and added escaped double quote to the watch script to fix some cross platform issues on Windows.

GitHub Repo

Cross Platform Fixes for Windows.
onchange on Windows - Escaped Double quotes
"start:p:watch-tailwind": "onchange \"tailwind.config.js\" \"src/**/*.css\" -e -- npm run start:tailwind",

NODE_ENV on windows needs to be set up like this
"build:a:tailwind": "SET NODE_ENV=production & npm run start:tailwind",

OR install cross-env package
"build:a:tailwind": "cross-env NODE_ENV=production npm run start:tailwind",

FAQ's
An Issue on Typescript
Use the @import on your tailwind.src.css instead of the @tailwind
`
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
`
From @Will Stowell

[tahsintushita]

Finally found a proper way to make Tailwindcss work

[nayeemuddin]

Thanks a lot. I requested for this one...

[ironpurush]

My tailwindcss IntelliSense extension is not workin with this one. Any solution for that.

[WillDelish]

Having issues getting this working with typescript. I have no errors, just tailwind simply does not work!