This interactive tutorial will guide you around the basic features of Tailwind CSS.
You should at least know some CSS, like how to change text, color, positions, etc as Tailwind is built on top of it and it will be much easier for you to get your head around. Start here if you don't know CSS.
If you're coming from another CSS framework like Bootstrap, Bulma and Foundation (and many more), you're probably familiar with this mindset: you need a button, so you grab the class that creates one and put in you button element.
But then you need a pill-shaped button, with green background, to match the style of your page, so you open a CSS file and write:
.btn {background-color: #38A169 !important;border-radius: 50px !important;}
Suddenly you're writing modifications for every style.
In Tailwind, I like to think that you have a different mindset. Instead of I need a button, you think of how should this button look? You write exactly what you want, in one place.
Tailwind is built around utility classes. Enough theory, show me the code!
Do you think you can change the color of the button below to green, just by changing its class? (Go ahead, every editor is live 💪).
bg utilities in Tailwind follow this format bg-<color>-<value>. color can be any of these:
black , white, gray, red, orange, yellow, green, teal, blue, indigo, purple and pink
While value goes from 100 to 900 (increases by 100), except for black and white, that are just... black and white.
Read the docs for background-color for more (and to see all the colors).
If bg changes the background, how could we change text colors? 🤐 Oh, I didn't say anything. Keep the actual background class and try changing the color of text to green-100.
The same rules that applied to bg are applied here, you just prepend the colors with text.
Read the docs for text color for more.
This comes from the official docs:
You aren't wasting energy inventing class names. No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that's really just a flex container.
Your CSS stops growing. Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS.
Making changes feels safer. CSS is global and you never know what you're breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking.
There are four ways of adding padding: the same value for every side p-; the same value for left and right px-; the same value for top and bottom py- and individually for every side pt- (top), pr- (right), pb- (bottom), pl- (left). A value should come after the -.
Add to this button the same padding for top and bottom: 2; and the same padding for left and right: 4. Oh and I forgot to tell you before, but there is no right or wrong answer, on every exercise. If you want to just draw your house using the editor below, feel free!
There is no one watching you here, try different values in the editor and see what you get 🧐
There is no need to memorize any of these values, and you'll probably use the same ones everytime. Every padding utility class I showed you before, can receive one of these values: px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64. Eg.: p-px, py-24
Ooof 😨 Calm down... They follow some logic (you don't need to make math everytime you use it, but it's good to know): every value is multiplied by 0.25rem (except px that is just 1px). So 4 is equivalent to 1rem, 8 is 2rem, 16... you got it.
So, the smaller ones (below 10) are great for finer details, like a button. The bigger ones for moments you need bigger spaces, like between divs, etc.
Read the docs for padding for more.
The great thing of having a set of utilities with values already chosen for you, is that you don't need to think too much on things like what is the border radius for buttons? Is it 4px or 3px?.
Tailwind got you covered here too. There are six main sizes for border-radius (and you can see more options on the docs link below): rounded-none, rounded-sm, rounded-md, rounded-lg and rounded-full. Pretty simple huh? They just tell you how rounded your element will be.
Make the button below have completely rounded corners.
It looks good now, but there is problem. If you click the button, on Firefox you probably won't see a border around it, but on Chrome there is a giant bold border, and the worst is that it doesn't even follow the element curves.
Let's fix it and make every browser look the same.
Read the docs for border radius for more.
The way to change the default appearence and create a better and standardized look in all browsers when focused, is to use pseudo-class variants.
In Tailwind, you can apply a different style for focus by just prepending utility classes with focus:. So, to apply a different background-color only on focus, you would use something like focus:bg-purple-400.
In the case of our button, we will combine it with two new properties: outline-none will be responsible for removing the default browser outline. But just removing it is very bad for accessibility, so we need to replace it with our own styles. That's when shadow-outline comes in. It provides an outline in the form of a shadow, that has the benefit of being accessible AND following the element's curves.
Below, try to combine focus: with outline-none and shadow-outline (it should result in two classes). Try your best and feel free to look at spoilers if you get stuck. The result you're trying to achieve is to get a rounded blue border with reduced opacity when you click the button.
In this case, focus just works as you would expect, but if you get yourself using this pseudo-class and not seeing results, it is because you have to activate the style for the specific utility you're trying to use, and in this case you're better served by the official docs.
Read the docs for focus for more.
Read the docs for outline-shadow for more.
More soon. Updates on @estevanmaito 🐤