Introduction to Tailwind CSS
Tailwind CSS can be used to style websites in the fastest and easiest way.
Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
The beauty of this thing called tailwind is it doesn’t impose design specifications or how your site should look, you simply bring tiny components together to construct a user interface that is unique. What Tailwind simply does is take a ‘raw’ CSS file, process this CSS file over a configuration file, and produces an output.
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 the traditional approach.
Advantages of Tailwind CSS:
- No more silly names for CSS classes and Id’s.
- Minimum lines of Code in CSS file.
- We can customize the designs to make the components.
- Makes the website responsive.
- Makes the changes in the desired manner.
CSS is global in nature and if make changes in the file the property is changed in all the HTML files linked to it. But with the help of Tailwind CSS we can use utility classes and make local changes.
Installation: There are two ways to use the CSS we can install them on our server or we can use the CDN link as well.
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 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: Using Tailwind via CDN
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"rel="stylesheet">
Limitation of Tailwind: But there are some limitations when CDN is used. Some of them are:
- Customize Tailwind's default theme can't be used
- Directives like @apply, @variants, etc can't be used
- Can't install third-party plugins
Example:
html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <!-- Tailwind CSS CDN link --> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"></head> <body class="m-4"> <h1 class="text-green-500 text-4xl font-bold"> Geeksforgeeks </h1> <strong>Tailwind CSS Tutorial</strong> <p> You can use Tailwind CSS as a replacement of CSS, this is a framework that increase your pace to design any website.</p> </body> </html> |
Output:
Supported Browser:
- Google Chrome
- Microsoft Edge
- Firefox
- Safari
Please Login to comment...