Tailwind CSS Tutorial #3 - Fonts & Colors

Hey gang, in this tailwind tutorial we'll take a look at some of the font & color utility classes.

🐱‍👤🐱‍👤 JOIN THE GANG -
----------------------------------------
🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Course Files:

🐱‍💻 🐱‍💻 Other Related Free Courses:

[ddb]

Fonts and colors were not showing until I did the following...
(I'm running tailwindcss v3.0.23)

1) Run the following command in the terminal:
npx tailwindcss init

This creates a file tailwind.config.js in the root directory i.e. same directory as package.json

2) Update the file content as follows:

module.exports = {
content: [
'./public/**/*.{html, js}',
],
theme: {
extend: {},
},
plugins: [],
}

3) Run the following command in the terminal:
npm run build-css

4) Run the following command in the terminal:
npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

That did it for me!

[modaralkasem]

I follow yours tutorials from about three years ago and I've started my journey with web with you.
I just want to tell you that you're one of best the instructors I've ever seen and want to thank you for the knowledge that you provide to us .
Best regards from Syria

[inukefun]

You are a incredible teacher and I appreciate you to the highest degree for taking your time and effort to explain and show the topics that you cover. Somehow I only discovered you a few days ago, currently im on ep 8 of the nodejs course and already I can say without a doubt you are the best teacher when it comes to this kind of stuff on youtube. Thank you from me and im sure so many others so much for the content you create, it sounds like im a friken fan-boy right now but truly theres nothing remotely bad i can say about your videos and your content 100% helps people achieve there goals and for that again all i can say is thank you

[ManInSombrero]

Today I noticed that It was a couple of days since the Shaun's last upload. "So he's human..." I thought. Then 3 new videos pop'ed out.

[Jacksons_are_jackson]

for those that are not working if they are following this tutorial in 2024:

1: npx tailwindcss init
2: update tailwind.config.js file according to the following
/** @type */
module.exports = {
content: [

"./public/index.html" -- replace this with your path to your html file
]

,
theme: {
extend: {},
},
plugins: [],
};

3. npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

[FloridaHomestead]

Your way of teaching in a "normal" non geeky way has helped me greatly to understand coding. I started with your youtube video turorials on HTML and CSS and then went through your modern JS course on udemy. As I continue to move on and learn more i'm going to continue coming back to your channel and courses because you do a great job of making the concepts clear and easy to understand for someone with no prior knowledge. Thank you!

[tsvetomilazdravkova]

Absolutely great tutorial, I'm learning with it with pleasure.
I advise anyone looking at it in 2024 and having difficulties with the installation to follow the steps in the official Tailwind documentation. Thanks a lot for the video ☺

[shaunrussell]

If anyone finds they have to save the file twice to see changes, it'd be because the Live-Server picks up the HTML changes before tailwind has finished building the CSS file and doesn't register the change

Instead of > live-server public
Try > live-server public --no-css-inject

This will update the page again when the tailwindcss finishes building so you don't have to refresh twice.

[maulik]

One day Shaun will make tutorial on "how to hack NASA using HTML"

[ecerejo]

I guess everything has its drawbacks and tailwind is no exception! Just by watching this video I can see I'm going to end up with all the elements full of classes!

[garikmelqonyan]

I believe that if I had to choose the best teacher on YouTube, my vote would undoubtedly go to you. Your explanations are truly exceptional

[canklc]

That is a huge luxury to listen to tuts in pure British accent 😇

[anahdaniel]

I installed liveserver but it seems i have to always run the command npm run build-css before any changes i make takes effect

[dnynu]

Please next tutorial should be "Mern Stack project"

[vijethkharvi]

after every changes run this command """npm run build-css""" otherwise your changes may not reflect you can also automate this after saving

[Lokesh]

I feel very comfortable with your teaching style than any other

[mnaresh]

if tailwind doesn't work try this 👇

1) change the build command from
"build-css" : "tailwindcss build src/styles.css -o public/styles.css"
to
"build-css": "tailwindcss build -i src/styles.css -o public/styles.css -w"
(basically specify the input file and add the watch tag)

2) Add tailwind.config.js file to the root directory, one where you created public and src folders
this is a must !!
inside the file add the following,
module.exports = {
content: ["./public/index.html"],
// ...
};
(specify your path inside the content)

3) delete the terminal and rerun live-server command, your code should work

[Sherzodbekh]

Hello sir, I did as a how you did . I installed tailwindcss and it got default classes but it doesn't work when I use color and fon-size !!! Any problem with my work? Can you explain ???

[sanfernoronha]

Really loving the playlist. Please do one on gridsome!....cheers!!

[tophinski]

Please continue this! Hard to find good tutorials like yours