CSS Kenpai 🍻

My Introduction to TailwindCSS

"TailwindCSS is the most controversial but the most amazing thing CSS devs have been gifted after grid and flex"
-- Loki the crocodile

In this article we will learn what is TailwindCSS, the basics, how to make a simple card with it, and be cool. Let's get it.
gif

What is TailwindCSS? #

It's a utility first framework for CSS, which basically means it provides predefined classes to do everything in CSS, but it's not like bootstrap where they have thier own implementation of things like grid, buttons, accordions, etc. It provides classes on the lower level, i.e; if you want to make a grid of your own specifications, you can do so easily with tailwind classes. It is more intuitive and faster, and once you get the hang of it you will create components and layouts like a wizard.

Installation #

There are many ways to install tailwind:

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Section Tailwind Demo</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>

</head>

This will get you started with using tailwind, for more information on installation, you can go here.

One important thing while using tailwind with npm is, it will add a file called tailwind.config.js, which might look like this:

// Example `tailwind.config.js` file
const colors = require('tailwindcss/colors')

module.exports = {
theme: {
colors: {
gray: colors.coolGray,
blue: colors.lightBlue,
red: colors.rose,
pink: colors.fuchsia,
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
}
}
},
variants: {
extend: {
borderColor: ['focus-visible'],
opacity: ['disabled'],
}
}
}

So you can see two sections, namely theme and variants. According to TailwindCSS documentation:

Basics #

When coming to CSS, there are some major things to focus on:

We have other areas as well like filters, borders, but these are the main parts. Now why i'm stating this is if you take care of these then rest will follow.

Taliwind has the concept of adding breakpoint classes before classes with a colon( : ) which define the breakpoints in which they will work. It has five breakpoints, and you can change these in the tailwind.config.js file.

You can apply these breakpoints to anything. Suppose you want a button to have blue color on middle sceen sizes but red on smaller screens, and it should be centered. You can do this:

See the Pen by Rishav (@Rj456) on CodePen.

Here are the classes I added:

Okay that was a lot of classes for a single button! But just imagine, these classes make up for each and every scenario of the button, you can add breakpoints without media queries, add hover, active and focus states,animations, etc with just some classes. This makes writing css very fast and really enjoyable!

Colors #

Colors in tailwind are defined on a scale of 50 to 700, 50 being the lightest shade, and 700 the darkest. They have a nice color palette of their own:

See the Pen by Rishav (@Rj456) on CodePen.

But if you need a different color scheme, you will need to go into the colors section in tailwind.config.js. From here you can go two directions, either curate your colors from tailwind or make your own color palette from scratch.

// tailwind.config.js
module.exports = {
theme: {
colors: {
// Configure your color palette here
// you can use these in your HTML like 'bg-blue-light' or 'bg-pink' for DEFAULT
blue: {
light: '#85d7ff',
DEFAULT: '#1fb6ff',
dark: '#009eeb',
},
pink: {
light: '#ff7ce5',
DEFAULT: '#ff49db',
dark: '#ff16d1',
},
}
}
}

If you want to use tailwind colors and customize them you can curate your colors by importing 'tailwindcss/colors' .

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
gray: colors.trueGray,
indigo: colors.indigo,
red: colors.rose,
yellow: colors.amber,
}
}
}

gif

Spacing and Sizing #

You must have gotten it by now, but how margin, padding and height/width are defined in tailwind are quite simple.

Adding full to any of these will amount to 100%, meaning if you add w-full, it means width is set to 100%.

Grid and Flex #

Although these are big topic in itself, and needs a seperate article, I will just explain enough to get you started.
Classes in tailwind are quite intuitive, say you want a flex container, with justify-items:between;, you can just do:

<div class="flex justify-between"></div>

For grid, if you want a grid with two columns three rows, you can do this:

<div class="grid grid-cols-2 grid-rows-3"></div>

grid-cols-2 translates to grid-template-columns: repeat(2, minmax(0,1fr));

For gap between flex or grid items, use gap property with the same syntax for other spacing/sizing properties like w, meaning gap-4 means 1rem gap, gap-y-4 means 1rem gap between elements on y-axis and so on.

Typography #

font-family #

Here are the default classes provided for font-family, which can be customized in the config file:

And obviously, you can customize them like this:

// tailwind.config.js
module.exports = {
theme: {
fontFamily: {
'sans': ['ui-sans-serif', 'system-ui', ...],
'serif': ['ui-serif', 'Georgia', ...],
'mono': ['ui-monospace', 'SFMono-Regular', ...]
}
}
}

font-size #

font-size can be set using text class , with text-xs being the smallest( 0.75rem ), and text-9xl the biggest( 8rem ).

text-color #

If you want a gray color text, you can use text-gray-400, for blue use text-blue-600 and so on. I'm sure you get the idea now, how the syntax is, you can guess the tailwind classes even if you don't know them, and most of the times you will be right.

There are so many more different classes for typography and other sections and you can look them up straight into the official documentation.

Let's make a card component #

See the Pen Tailwind responsive card by Rishav (@Rj456) on CodePen.

For further learning, I will suggest stick with the official docs and if you learn better by videos, Shruti Balasa has a whole playlist of tailwind tutorials on her Youtube channel.

That's it! I'm posting after a long time, and I hope you learned something by reading this article. Thanks for reading!