From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Introducing Tailwind

Introducing Tailwind

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Introducing Tailwind

“

Hello, and welcome to lesson number three. In this lesson, we'll discuss utility-first CSS framework that is Tailwind. Let's start with the introduction of Tailwind. Tailwind CSS is a utility-first framework that allows you to build modern responsive UIs directly into your HTML, JSX, using predefined utility classes. Instead of writing custom CSS, you compose your design using Tailwind's class names like p-4, bg-blue, dash-500, text-center, et cetera. We use Tailwind CSS for rapid development. We can easily style components faster without switching between JSX and CSS files. In fact, we don't need CSS files as such. There is no more custom CSS help because we avoid writing and maintaining long CSS files and class names. For example, .button-primary, .header-content, etc. Tailwind CSS is responsive by default. Tailwind is a mobile first approach. That means it styles at first for your mobile view and if you want to add support for the other screen sizes, you can easily add it. It gives…

Contents