Tailwind CSS
Tailwind CSS is basically a Utility first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS.
Why Tailwind CSS ?
As we know there are many CSS frameworks but people always choose the fast and easy framework to learn and use in the project. Tailwind has come with inbuilt a lot of features and styles for users to choose from and is also used to reduce the tendency of writing CSS code and create a beautiful custom UI. It will help you to overcome the complicated task. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes directly into the HTML code.
Installation of Tailwind CSS:
Basically Tailwind is available on npm and you can install it using following command:
npm install tailwindcss
After that create ad Tailwind configuration file using the following command:
npm tailwind init {name of file}or
You can install tailwind by using the yarn command:
yarn add tailwindcss
After that create ad Tailwind configuration file using the following command:
yarn tailwind init {name of file}Example: It is a basic example of Tailwind CSS that describe how to change background color on mouse hover.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href=
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body>
<div class="h-full border-2 border-gray-200
border-opacity-60 rounded-lg
overflow-hidden">
<div class="p-6 hover:bg-green-600
hover:text-white transition
duration-300 ease-in">
<h1 class="text-2xl font-semibold mb-3">
Hover
</h1>
</div>
</div>
</body>
</html>
Output:
Advantages:
- Highly Customizable.
- Enables building complex responsive layout.
- Responsive and development is easy.
- Components creation is easy.
Disadvantages:
- There is missing headers, navigation components.
- It take time to learn how to implement inbuilt classes.
Learn more about Tailwind CSS:
Tailwind CSS Basics
Tailwind CSS Accessibility
Tailwind CSS Alignment
Tailwind CSS Backgrounds
Tailwind CSS Borders
- Tailwind CSS Border Radius
- Tailwind CSS Border Width
- Tailwind CSS Border Color
- Tailwind CSS Border Opacity
- Tailwind CSS Border Style
- Tailwind CSS Divide Width
- Tailwind CSS Divide Color
- Tailwind CSS Divide Opacity
- Tailwind CSS Divide Style
- Tailwind CSS Divide Width
- Tailwind CSS Divide Color
- Tailwind CSS Divide Opacity
- Tailwind CSS Divide Style
- Tailwind CSS Ring Width
- Tailwind CSS Ring Color
- Tailwind CSS Ring Opacity
- Tailwind CSS Ring Offset Width
- Tailwind CSS Ring Offset Color
Tailwind CSS Effects
Tailwind Filters
- Tailwind CSS Filter
- Tailwind CSS Blur
- Tailwind CSS Brightness
- Tailwind CSS Contrast
- Tailwind CSS Drop Shadow
- Tailwind CSS Grayscale
- Tailwind CSS Hue Rotate
- Tailwind CSS Invert
- Tailwind CSS Saturate
- Tailwind CSS Sepia
- Tailwind CSS Backdrop Filter
- Tailwind CSS Backdrop Blur
- Tailwind CSS Backdrop Brightness
- Tailwind CSS Backdrop Contrast
- Tailwind CSS Backdrop Grayscale
- Tailwind CSS Backdrop Hue Rotate
- Tailwind CSS Backdrop Invert
- Tailwind CSS Backdrop Opacity
- Tailwind CSS Backdrop Saturate
- Tailwind CSS Backdrop Sepia
Tailwind CSS Flexbox
Tailwind CSS Grid
Tailwind CSS Interactivity
Tailwind CSS Layout
Tailwind CSS Sizing
Tailwind CSS Spacing
Tailwind CSS SVG
Tailwind CSS Typography
- Tailwind CSS Font Family
- Tailwind CSS Font Size
- Tailwind CSS Font Smoothing
- Tailwind CSS Font Style
- Tailwind CSS Font Weight
- Tailwind CSS Font Variant Numeric
- Tailwind CSS Letter Spacing
- Tailwind CSS Line Height
- Tailwind CSS List Style Type
- Tailwind CSS Placeholder Color
- Tailwind CSS Placeholder Opacity
- Tailwind CSS Text Alignment
- Tailwind CSS Text Alignment
- Tailwind CSS Text Color
- Tailwind CSS Text Opacity
- Tailwind CSS Text Decoration
- Tailwind CSS Text Transform
- Tailwind CSS Text Transform
- Tailwind CSS Vertical Alignment
- Tailwind CSS Whitespace
- Tailwind CSS Word Break
Tailwind CSS Tables
Tailwind CSS Transitions and Animation
Tailwind CSS Transforms
.png)
