Tailwind CSS v2.0 | Setup and Install

TailwindCss Releases First Major Update with Tailwind Css v2.0.
We'll take a quick overview of the changes and right into setup and install Tailwind v2.0

We'll automate the build process with a watch script. Use PostCss to purge and minify the production build.

Github Source

Video Sections:
00:00 - Overview
02:42 - Install Tailwind css v2.0
04:47 - Create Config Files
07:14 - npm build script
08:25 - npm watch script
12:40 - npm production script
15:42 - Outro

Subscribe and Learn to Code w/ Chu

Tailwind v1 Tutorial Series

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.
Thanks to @​Jon Fackrella and @​Allformyequine​

GitHub Repo

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

NODE_ENV on windows needs to be set up like this
"tw:prod": "SET NODE_ENV=production & postcss build ./src/css/tailwind.css -o ./public/css/tailwind.css",

or install the cross-env package and change the script to
"tw:prod": "cross-env NODE_ENV=production postcss build ./src/css/tailwind.css -o ./public/css/tailwind.css",

[harvanchik]

It would be helpful if you explained what you were doing and why, specifically in the installation process.

[StackAcademy]

Thank you man I really appreciate it, I'm new to tailwindcss and the official documentation is not beginner friendly. I don't have a problem of using the classes etc but the configuration process had me puzzled so thank you this vod.

[goncalodumas]

Great tutorial, very detailed and useful to get you started on a tailwindcss project.

[giandomenicoriceputi]

Thanks now I set in a right way my tailwind css project

[clintmckoy]

Thanks for putting this together! Editing my first Tailwind project! Goodbye Bootstrap...

[jamesfoley]

Thank you so much for the video. I was up all last night trying to get tailwind to work with parcel.js. I couldn't get the css to purge....I am not sure that the documentation on the tailwind site is really that clear about how to get a basic web project working and to have tailwind purge the css. I think there are a few important things you point out like setting the NODE_ENV to production so you need the cross-env to do that. Also you will need to daisy chain commands together for tailwindcss and postcss to do their thing. Thanks again and to @​Jon Fackrella and @​Allformyequin for helping your

[MikeJones-nglg]

Thank you so much. i'm fairly new to all of the Dev stuff but have been working with Laravel and Tailwind CSS... and up until 2.0 id had no issues. i struggled to get 2.0 installed but this has just cleared everything up! thank you.

[oliversaxon]

Agree with some other comments below - you should explain why we need to install this way with these additional packages.

[Allformyequine]

This is super! So is there a way to add a simple js compiler in addition? Like can you have a second build tool to do that part??? Very good tx!

[hectorvargas]

nice tutorial !! thanks a lot, how can i remove the tailwind deafult comments in the build css production?
i guess that's with cssnano but i tried it and it doesn't work as i wanted

[namanagrawal]

There is an error
ReferenceError: cassnano is not defined
at Object.<anonymous>
at Module._compile
at Object.Module._extensions..js
at Module.load
at Function.Module._load
at Module.require
at module.exports
at loadJs
at Explorer.loadFileContent
at

[chinmayjoshi]

Those who are getting the following error


just change the 'cwc' to 'cws' in the line @ 10:09

Dont know why but the 'cwc' in my public/css/tailwind.css were 'cws'

(Windows 10) (tailwindcss 2.0.2)

[MaxWeir]

I like the idea of the purge CSS function, but that strips any css classes not used.

What if you are building a site but want to have those extra classes available? Example building out a marketing page in the future where they might need a bunch of classes to create their desired layout.

[fatcat]

What does npm production script does exactly ?

[alfalalo]

Very good tutorial, I have a problem, copy the code as it is video, but when doing tw: watch it freezes and does nothing.
Then copy the github code to be sure that everything was fine, and nothing.
Any support?
Thank you!

[pressiyamu]

I am getting a weird error at 8:08
npm ERR! Exit status 1
npm ERR!
I have no clue here, I am using windows 10

[navidtaher]

hi, i am really stuck at 8:05 i did everything as shown in the videos but when i run the script in terminal nothing happens like no new file is created or anything new is added just the terminal runs for a minute at the end i get this :

.\32xl\:animate-bounce {
-webkit-animation: bounce 1s infinite;
animation: bounce 1s infinite;
}
please help!

[bitchdxa]

hey i have problem when npm run tw:change

onchange' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Exit status 1
npm ERR!
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!

[Curiosity]

Your content is really really good! You just need to buy a new microphone.