01: Setting Up Tailwind CSS v2.0 – Tailwind CSS v2.0: From Zero to Production

[ThaRealIansanity]

I had to make a couple of changes to get this working with tailwind 3 and
thought I'd share in case it helps anyone else.

package.json versions installed February 17, 2022
"devDependencies": {
"autoprefixer": "^10.4.2",
"postcss": "^8.4.6",
"tailwindcss": "^3.0.23",
"vite": "^2.8.3"
}

tailwindcss.config.js content section
content: ['./*.html']

index.html instead of a link tag for tailwind.css, it should be a script tag
with type="module". The module part is important. Without it you will get a error
in the browser.
<script type="module"

[Virtualmix]

If you get: `[deprecation] Running tailwindcss without -i, please provide an input file.`
You should use: `npx tailwindcss-cli build -i css/tailwind.css -o build/tailwind.css`

[kevinstephens]

I thought you should know: I have been trying to get a vanilla Tailwind 3.0 project up and running for three days now, pulling my hair out with other instructional videos - every one I could find - just trying to get a base project built. My problem was that my 3 base layers weren't being replaced by css through the build script. Your video mentioned using npx tailwindcss-cli as the command to run, I popped that into my script, and it worked!!! Thank you so much. Other scripts and instructions don't mention to add the command line interface option, -cli, to the command. Thank you Thank you!

[kimanjepatrick]

Tailwind is so cool, utility classes feel so natural .
It's also worthy mentioning that this guy is a good teacher

[dericortiz]

I had problems getting tailwind to work from this outdated tutorial. What fixed it for me was setting the path to my index.html in the content: [] section of the tailwind.config.js file. Hope that helps anyone viewing the tutorial in the present day!

[goncalodumas]

Great job documenting and providing an easy path to Tailwind CSS.

[ranibenmahmoud]

i fell in love with tailwind. please more example and more details. I can't wait to see even hungry to learn more and more.
thank you very much for this gift.

[DodaGarcia]

You’re so positive and fun to watch!! I can’t wait to start using Tailwind

[freemanjiang]

After faithfully using Chakra UI for the past 6 months I’m moving to Tailwind and happy:)

[nikolasosvalds]

I had to add content: ['./index.html'] to the tailwind.config.js file to get this to work. Is not covered in the video. May be related to v3?

[IanaCaldas]

Yep, I guess I have a new fav CSS framework. Sorry, Bootstrap. :P

[valirjonathan]

Awesome lessons. Now I can start learning tailwind css faster with proper workflow.

[தமிழோன்]

Finally no more CSS overrides! Goodbye Bootstrap, Material UI, Bulma, Semantic UI, and many other CSS frameworks that need heavy overrides for maintaining individuality! 😁

[nicholasyoa]

I have to say: thank you so much, your docs itself are so detailed and as well as that you have videos to guide us - I don't think there's anything else I could personally ask for, thank you! As a student, this is so helpful in seeing how efficient I can make my project, and to make sure I get the most out of tailwindcss as possible. I've never found something so easy to use that's customizable and has so many uses about it.
Anyways with that out my system, I'm DEFINITELY using this for future projects!

[nullzero]

Excellent introduction. However, what I could not understand after set up process is the deletion of build folder which include the output CSS file we used when we build the framework @4:22. It did not work out with me until I used the output css file and link it in html page

[nicodinh]

FIX tailwind css 3

tailwind.config.js:

module.exports = {
content: ['index.html'],
darkMode: 'media', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}

[rathesungodwillremovethepe]

The link to tailwind cdn doesn't exist...Even if you follow the video step by step, the install fails with npm ERR!

[ReadyDesignerOne]

Thank you, the rest of my weekend is sorted ;)

[just_timothy]

Nice but this doesn't work in 2023

[tisadiniossiana]

I found gold!
Thank you so much man. You help my learning a lot. Keep up your excellent video😊