Tailwind CSS React Tutorial
ฝัง
- เผยแพร่เมื่อ 3 ส.ค. 2021
- Tailwind CSS React Tutorial
If you're looking to learn tailwindcss with react, this tutorial should cover the basics of getting it up and running. It's based on the official documentation located here:
tailwindcss.com/docs
Tailwind react unlike bootstrap or material UI works a little different, since it's based on class names getting it working inside react just involves hooking it up and writing your own components. You can customise colors, sizing, etc as well when you properly implement it.
Let me know if you like this tailwindcss react tutorial because if so, I might do some more about it.
#tailwindcss #react #tailwind
Learn Design for Developers!
A book I've created to help you improve the look of your apps and websites.
📘 Enhance UI: www.enhanceui.com/
Feel free to follow me on:
🐦 Twitter: intent/follow?scr...
💬 Discord: / discord
💸 Patreon: / adriantwarog
Software & Discounts:
🚾 Webflow: webflow.grsm.io/adrian
🌿 Envato: 1.envato.market/yRZjz2
🌿 Envato Elements: 1.envato.market/LP0OJZ
🔴 Elementor: elementor.com/adrian/?ref=23140
✖ Editor X: www.editorx.com/adrian-twarog
Computer Gear:
⬛ Monitor: amzn.to/3f9DOQI
⌨ Keyboard: amzn.to/3eA5UFD
🐁 Mouse: amzn.to/3xVJO8l
🎤 Mic: amzn.to/3hgCfms
📱 Tablet: amzn.to/3ewt7sa
💡 Lighting: amzn.to/3vOZeZY
💡 Key Lighting: amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: amzn.to/3uCv4J9
📸 Primary Lens: amzn.to/3vT6wMm
📸 Secondary Lens: amzn.to/3tyqWIX
🎥 Secondary Camera: amzn.to/3o2zCGi
🎙 Camera Mic: amzn.to/33tCz9l
🎞 USB to HDMI: amzn.to/33yW9RE - วิทยาศาสตร์และเทคโนโลยี
More tutorials on Tailwind CSS combined with React would be great!!!
Yes, please more tutorials! This is super helpful, as there isn't much content on React + Tailwind. 🙂
loved this introduction to Tailwind. Easy to follow, and yet comprehensive
Thank you so much for explaining the Tailwind CSS insert of React in such a simple and beautiful way.😊 Tailwind CSS combined with React it was great🤩
Gotta love React!!! ;) Great vid as always man ...
This was so helpful. Thank you for this tutorial. A tailwind and React playlist of various important concepts would be amazing. Keep up the great work!
If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) - maybe this is also helpful ... 😉
more tutorials on React + Tailwind CSS please got addicted to your videos !! hehe
Great video Adrian!
Endless Thanks!
That's what I needed.
amazing tutorial , thanks adrian
This was PERFECT!
very precise and detailed you are a good teacher
i am late but still here for Adrian, the best!
I will remember this tardiness!
I really needed this Thankyou
Very great help. Thanks. More please @
Adrian Twarog
More tutorials on react with tailwindcss would be appreciated :) Even better, a full tutorial on how to build the design and frontend and API integration in a SaaS
Loved this
great video, love it!
please more tutorials like this one!
Thank you very much. Very useful info.
This was great thanks!
awesome teaching man.
Please make a playlist for React with TailwindCSS. Would be of much help! Love ur vids!
man you are great ^__^ best intro
I would love to see more videos on Tailwind CSS and React
yes we need more tutorials
you're the best!
Hi, thanks for your video! I have a question, I've compiled my tailwind.css to tailwind.output.css, unfortunately, my tailwind.output.css didn't change at all when I updated my tailwind.css. Could you give me some solution for this problem? thanks!
Simple and very helpful..
great video thank you so much
great learning in short span of time
It was amazing. Please do more sir❤🎉
If you want to watch another video on Tailwind + React: I just posted a new Tailwind CSS Tutorial (2023) - maybe this is also helpful ... 😉
Would love a follow up video!
Need more tailwind stuff
Great ........ Love from Bangladesh... Need More tutorial on tailwind css
great tutorial by mr. beast :)
ty
excellent
For those using Next, they have an npx template for tailwind! Does all this for you :)
Please more video with React+Tailwind css (maybe also tailwind UI with React?) Ty anyway!
Thanks 👍
For sure!
🔥🔥🔥
hi adrian, i am planning to create my portfolio . I already have one which I created during my initial phase of my career but it is not looking good , need your guidance to redesign my portfolio
I am unable to update Tailwind text color using react useState hook, can you please help ?
my mind was blown after using vanilla css. holy
What do you think about using Tailwind with Alpine.js?
What font and theme u r using
think you, my concern is about setting up tailwind in react with vite,
Yes we want more ...... We want more...... We want more
Hello sir, can u give me tutorial how to use Tailwind JIT in react please 🥺
how to do that by yarn ?
Hello man, I get this error when trying to npm start : " EIO: i/o error, read "
in my index.html i cant apply background color of less than 800 can you help me why
More videos please
Hey adrian please make a tutorial on latest 2021 wordpress theme development video please
my tailwind intel sense is not working after installing it
Thanks 🇮🇶😍
In the moment at 4:49 u select class and change it to className you're selecting all class attributes, how do you do this?
holding down alt and clicking on each area
Hello Adrian, Do you have Tutorial reactjs + Material UI?? I want interest & Please do add subtitle..
have your tried windicss ?
I'm curious, but do you have Polish roots?:) Your surname sounds familiar :D
I never used Tailwind css but it's looks like tons of inline styling to me
yes it is… kind of
but in a super cool way
think of it like the creator said: APIs for styles
Yeah except in classes rather than styles!
ty mrbeast
in min 6:23 how did that auto complet work ? for tailwind config
Tailwind Intellisense plugin, and press ctrl+space to show drop down menu of options
Please update this... Thank you.
Gerald Cotten, is that you?!
Can you add subtitles ?
thanks for the video. NOW WHERE'S THE DAMN ONCLICK!!??
I don't use bootstrap or tailwind, I like css .I love writing css though it takes some time but I enjoy.
The react bootstrap syntax is so ugly I couldnt do it. So now im in the Tailwind camp
is it me or does the @tailwind base directive mess everything up
Oh what happen?
@@AdrianTwarog it gets rid of all default styling, not sure if I'm using it incorrect. But for eg, if I create a button element, it will literally just show as text. I'm using it with React
The Title should be Tailwind CSS Introduction.
tailwind is just writing css inside the className making the markup extremely long. What is the benefit of this? You still need to know CSS in order to use tailwind anyways.
Read the docs, they said it's similar to inline style but each class is a predefined style. It's obviously make the development much faster since you don't need to go to css file and define everything. Plus tailwind also catch hover event while the inline style can't.
6 months later, tailwind 3 don't need craco whyy !!!
First comment
Always!
subtitle pls
i thought u will explain each n everything. syntax and how to actually write css in tailwind n all. but u jus copy pasted the entire css.
Bootstrap is better 😅😅😅
having no options for subtitles made me leave, just saying!
A lot of time just to show how to add color to text. I could just write the code to do that without using tailwind. When you post a 'tutorial' it should be much more extensive. This is not a 'tutorial'. It's a 15 minute explanation how to add color to text in REACT/Tailwind.
Man up stop dancing while you are talking
Meh.. another CSS shortcut library
Tailwind is super cool. Also if you wanna use it with Next.js, you can create your project as npx create-next-app -e with-tailwindcss my-project ( This will create everything for you)
Thanks, DECA 4!
craco don't work with react-scripts@^5.0.1 it shows me this error:
npm start ✔ 11s
> fly-with-zoki@1.10.0 start
> craco start
Failed to compile.
For the selected environment is no default script chunk format available:
JSONP Array push can be chosen when 'document' or 'importScripts' is available.
CommonJs exports can be chosen when 'require' or node builtins are available.
Make sure that your 'browserslist' includes only platforms that support these features or select an appropriate 'target' to allow selecting a chunk format by default. Alternatively specify the 'output.chunkFormat' directly.
Looks like a modern bootstrap. Too much CSS funk in your components, which is primarily why I didn’t like bootstrap 🥲