Tailwind CSS Tutorial #3 - Fonts & Colors 

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! Further reference: tailwindcss.com/docs/installation

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.

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!

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

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

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!

I feel very comfortable with your teaching style than any other

Please continue this! Hard to find good tutorials like yours

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

More great insight and clear presentation. Thanks.

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

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

kudoos @monique, your reponse is a life saver

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

Excellent tutorial as usual. Love your channel

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 ☺

I just wanna ask is this a complete tailwind guide playlist by any means? Grateful none the less!

how to make typographical vertical rhythm with the default css classes on font-sizes? do we have to custom adjust line-height and margins?

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.

You are my hero man and tailwind css is awesome.

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 {import('tailwindcss').Config} */ 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

Please next tutorial should be "Mern Stack project"

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 ???

Hey Shaun, how did you do that multi-element Select @ 6:53? Thanks!

You are the best..Sensei

Thanks Legend ❤️🤘

Thanks a lot 😊

Thank you!

On the "Header - H3" tag, "2xl" up to "4xl" aren't working, but "5xl" is, any takers on what might be wrong?

Thanks you very much

😻😻 From my 2nd account! 😝👌🏻 Love your videos. Also btw you can type ! instead of doc for the boilerplate html.

😍 thank you, when will the next part come?

thank you so much sir

There is one thing that helped me. I just updated my Node.js.

I'm watching your node js tutorials

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

a series on Styled-components please

Very explanatory

Excellent

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

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

Since it's missing from the description: tailwindcss.com/docs/font-size

Need a roadmap playlist to follow your RU-vid content !!!!!!

OMG....Tailwind is such a pain to install but once you get it right...I implore anyone reading to quickly retain that info because once you learn Tailwind, it makes writing CSS so much simpler and imho, fun! I actually think that it helps you drill CSS faster, if you know the fundamentals, of course!

Pls, make how to config tailwind like custom radius, color. And also how to use purge css with it

Shaun you're so cool

Thanks.

My lovely ninja😊

"I will leave the link in the description" - the recurrent lie Ninja always tell :). Otherwise great job at explaining complex stuff in the most understandable way. Thanks a lot

great guy

Every time i change the class or add I have to run npm run build-css. how to run build-css automatically? and I used live-server and it does not work either what should I do?

hello dude, Tailwind newbie here. i'm trying to install the latest tailwind and its now on version: 3.0.23 and i'm not quite getting it to work as you've explained, so can only assume that its changed since the version you're using. it strips the default styles but its leaving the bare minimum css, so its not actually picking up any of the classes i apply to elements, like font size or colour or anything. know whats happened between the versions or anyone able to help? cheers

The most beautiful site i have ever seen.

How to import myself fonts to project?

Take a break man, damn 😂😂

Brilliant classes, thank you. However, the font-bold (and all other font-weight modifiers are not there) is not in public/style.css. Did I miss a step? On closer inspection many of the classes are not present in my public style.css file, can anyone help. I have followed the instructions re-built it a few times

I'm requiring to run npm run build each time I add a class to a div how to make it auto build ?

By the way guys, I noticed that when using vs code, vs code actually shows you the full list of tailwind utility classes that are available to you in a certain categroy.

i'm new to tailwind and just trying it out but for some reason following all the step I cannot get none of the classes to work. I have no idea what I'm doing wrong I've watched these videos idk how many times

Is This Tailwind css applicable for react projects?

If I am putting attributes in class , its not reflecting in the webpage , why I tried changing colour and fonts, why it is not reflecting in the webpage, Please help.

Can anyone tell me how to select both h4s at once, I tried to select them with control d but control d also select the closing tag of h4

I followed everything but my the styles are not displaying on my browser, someone please explain what is wrong cause am sure others are having same challenge. Thank you

Are you interested in game development like unity ?

Hi Shaun ! Are you irish or english -scottish or are you from isle of man? Would you mind telling us where u from please ?

❤

after following the steps correctly if the styles won't apply perform the following: 1: npx tailwindcss init 2:update tailwind.config.js file according to the following /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./public/index.html" -- replace this with your path to your html file ] , theme: { extend: {}, }, plugins: [], }; finally make sure you have written the script in the following way "build-css": "tailwindcss -i ./src/styles.css -o ./public/styles.css --watch" after this i hope everything will work okay

Please make tutorials on Material UI 🤕

Normal people - let's come over "here". Ninja - Let's come over "hiaaaaaa".

Anyone in 2023

Great channel!!❤...At least Shaun drop your WhatsApp line in your description.

That moment where yellow doesn't look like yellow

Hello I've got a problem Everytime I add a class to change the font and colors it remains the same I did follow the videos, I even restart the process twice but it's impossible What am I doing wrong?

When I strat with this classes doesn`t work.

Sir, MERN please

Hi guys. My styling isn’t working at all

Who you calling Baldy? Baldy.

not working for me :/

Not a fan of this utility class approach at all. It’s almost like writing inline-css directly, thus Spaghetti code. It clutters the html too much. But still and as always: Excellent content from the NetNinja. Thank you.

6th...!

Those who are complaining about the ugly css classes just use .heading{ @apply text-2xl font-bold } you have to use post css and npm run watch will compile everything

he forgot to run build-css

{2024-04-18}

Anyone in 2024?