Get started with Tailwind CSS
Tailwind CSS is a "utility-first" CSS framework that provides a deep catalog of CSS classes and tools that lets you easily get started styling your website or application.
Why we use Tailwind CSS
It's fast
flexible
reliable
zero runtime
Installation
Let's get started with Tailwind, In this article, We are going to use tailwind from CDN(content delivery network).
Add the Play CDN script to your HTML
To use tailwind classes We have to add the Play CDN script tag in <head> of your HTML file.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello, world!
</h1>
</body>
</html>
Try customizing your config
In Tailwind, you can also add your own customizations and configurations. Edit the tailwind.config object to customize your configuration with your own design tokens.
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>
Try adding some custom CSS
Use type=" text/tailwindcss" to add custom CSS that supports all of Tailwind's CSS features.
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
</style>
//using the above class in html
<div class="lg:content-auto">
<!-- ... -->
</div>
Try using a first-party plugin
Enable first-party plugins, like forms and typography, using the plugins query parameter.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
</head>
<body>
<div class="prose">
<!-- ... -->
</div>
</body>
</html>
Core Concepts
Now let's dive into the core concept of Tailwind.
Utility-First Fundamentals
When designing web in conventional ways we first write HTML and style which we want and define them in CSS file as we wanted.
But in Tailwind we use pre-existing classes directly in your HTML.
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
<div class="shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-slate-500">You have a new message!</p>
</div>
</div>
Tailwind’s flexbox and padding utilities (flex, shrink-0, and p-6) to control the overall card layout
The max-width and margin utilities (max-w-sm and mx-auto) to constrain the card width and center it horizontally
-The background color, border radius, and box-shadow utilities (bg-white, rounded-xl, and shadow-lg) to style the card’s appearance
The width and height utilities (w-12 and h-12) to size the logo image
The space-between utilities (space-x-4) to handle the spacing between the logo and the text
The font size, text color, and font-weight utilities (text-xl, text-black, font-medium, etc.) to style the card text
You can find more about Tailwind utility classes from utility classes
Handling Hover, Focus, and the Other States
In this section, we are gonna discuss using hover , focus and other states in utility classes.
Every utility class in Tailwind can be applied conditionally by adding a modifier to the beginning of the class name that describes the condition you want to target.
Pseudo-classes
hover (:hover)
Style an element when the user hovers over it with the mouse cursor using the hover modifier:
<div class="bg-black hover:bg-white ...">
<!-- ... -->
</div>
focus (:focus)
<input class="border-gray-300 focus:border-blue-400 ..." />
focus-within (:focus-within)
Style an element when it or one of its descendants has focus using the focus-within modifier:
<div class="focus-within:shadow-lg ...">
<input type="text" />
</div>
focus-visible (:focus-visible)
Style an element when it has been focused using the keyboard using the focus-visible modifier:
<button class="focus:outline-none focus-visible:ring ...">
Submit
</button>
active (:active)
Style an element when it is being pressed using the active modifier:
<button class="bg-blue-500 active:bg-blue-600 ...">
Submit
</button>
first (:first-child)
Style an element if it’s the first child using the first modifier:
<ul>
{#each people as person}
<li class="py-4 first:pt-0 ...">
<!-- ... -->
</li>
{/each}
</ul>
last (:last-child)
Style an element if it’s the last child using the last modifier:
<ul>
{#each people as person}
<li class="py-4 last:pb-0 ...">
<!-- ... -->
</li>
{/each}
</ul>
Responsive Design
Building responsive sites are much easier in tailwind Using responsive utility variants to build adaptive user interfaces.
Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.
There are five breakpoints by default, inspired by common device resolutions:
Mobile First
By default, Tailwind uses a mobile first breakpoint system,
Example.
<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">
Flex
Utilities for controlling how flex items both grow and shrink.
Also, you can check out my blog on flex to get a better understanding of flex itself.
Flex Direction
Utilities for controlling the direction of flex items.
Flex Wrap
Utilities for controlling how flex items wrap.
Flex Grow
Utilities for controlling how flex items grow.
Flex Shrink
Utilities for controlling how flex items shrink.
Order
Utilities for controlling the order of flex and grid items.
Grid
Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
Specifying the columns in a grid
Use the grid-cols-{n} utilities to create grids with n equally sized columns.
<div class="grid grid-cols-4 gap-4">
<div>01</div>
<!-- ... -->
<div>09</div>
</div>
Spanning columns
Use the col-span-{n} utilities to make an element span n columns.
<div class="grid grid-cols-3 gap-4">
<div class="...">01</div>
<div class="...">02</div>
<div class="...">03</div>
<div class="col-span-2 ...">04</div>
<div class="...">05</div>
<div class="...">06</div>
<div class="col-span-2 ...">07</div>
</div>
Starting and ending lines
Use the col-start-{n} and col-end-{n} utilities to make an element start or end at the nth grid line. These can also be combined with the col-span-{n} utilities to span a specific number of columns.
<div class="grid grid-cols-6 gap-4">
<div class="col-start-2 col-span-4 ...">01</div>
<div class="col-start-1 col-end-3 ...">02</div>
<div class="col-end-7 col-span-2 ...">03</div>
<div class="col-start-1 col-end-7 ...">04</div>
</div>
Grid Template Rows
Utilities for specifying the rows in a grid layout.
<div class="grid grid-rows-4 grid-flow-col gap-4">
<div>01</div>
<!-- ... -->
<div>09</div>
</div>
All properties we learned for grid columns are applied to grid rows also.
Gap
The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.In tailwind also there are gap Utilities for controlling gutters between grid and flexbox items.
These are some examples.
Conclution
I hope you enjoyed reading it. Please drop your suggestions as comments so I can improve.
Resources: Mdn docs, Tailwind docs,Geekforgeeks