What is Tailwind CSS
-Tailwind is very easy to use and to get your grasp on if you have good knowledge about CSS. Since it is that same CSS we are writing but in short, there wasn't anything extra that was needed to learn before I could start learning Tailwind.
Why Tailwind CSS?
Faster UI building process
It is a utility-first CSS framework which means we can use utility classes to build custom designs without writing CSS as in traditional approach.
Advantages of Tailwind CSS:
No more silly names for CSS classes and Id’s.
Minimum lines of Code in CSS file.
Makes the website responsive.
Getting Started
Installation:
Method 1: Install Tailwind via npm
- Step 1:npm init -y
- Step 2:npm install tailwindcss
- Step 3:Use the @tailwind directive to inject Tailwind’s base, components, and utilities > styles into your CSS file.
- Step 4:npx tailwindcss init (This is used to create a config file to customize the designs. It is an optional step.)
- Step 5:npx tailwindcss build styles.css -o output.css
Method 2: Using Tailwind via CDN
<!-- add it to the head section of the html file -->
<script src="https://cdn.tailwindcss.com"></script>
Note: The Play CDN is designed for development purposes only, and is not the best choice for production.
Core Concepts
Utility-First Fundamentals
Traditionally, whenever you need to style something on the web, you write CSS.
With Tailwind, you style elements by applying pre-existing classes directly in your HTML.
Responsive Design
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:
Breakpoint prefix Minimum width CSS sm 640px '@media (min-width: 640px) { ... }' md 768px '@media (min-width: 768px) { ... }' lg 1024px '@media (min-width: 1024px) { ... }' xl 1280px '@media (min-width: 1280px) { ... }' 2xl 1536px '@media (min-width: 1536px) { ... }