How to Install and use Tailwind CSS in a Project?
There are two methods to use Tailwind CSS in a project: you can either install it on your server or use it through a CDN link.
Installation of Tailwind CSS 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 utility styles into your CSS file.
@tailwind base;
@tailwind components;
@tailwind utilities;
- Step 4: This is used to create a config file to customize the designs. It is an optional step.
npx tailwindcss init
- Step 5:This command is used to compile style.css is the file that has to be compiled and output.css is the file on which it has to be compiled. If the file output.css is not created earlier then it will automatically be created.
npx tailwindcss build styles.css -o output.css
Method 2: Use Tailwind CSS via CDN
The simplest method to use Tailwind CSS in a project via CDN link with installing the module. Just include the following CDN link in the <head> section of your HTML file.
<link href=”https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css”rel=”stylesheet”>
Introduction to Tailwind CSS
Tailwind CSS is a utility-first CSS framework that streamlines web development by providing a set of pre-designed utility classes. These classes enable rapid styling without writing custom CSS, promoting consistency and scalability. Tailwind’s approach shifts focus from traditional CSS components to functional classes, empowering developers to efficiently build responsive and visually appealing interfaces with minimal effort.