Introduction
Tailwind CSS is a highly customizable, low-level CSS framework for web development. It is self-described as utility’s first CSS framework.
The first release of this framework happen on 1st November 2017 on GitHub as open-source project. The webpage build using tailwind CSS is responsive from small to large devices. Tailwind CSS does not focus on the functionality of an item being styled. It mainly focuses on how an item must be focused. This makes easier for developers to adopt and test new styles without leaving the working file. While using tailwind css, there is no need of external css file.
Using this framework, you can customize almost every component used in your project. It was downloaded over 10 million times, making it one of the most growing CSS frameworks. People who needs fast and quick development are tend to be the user of this framework. This framework packed with classes like flex, pt-4 text-left and rotate-90 that can be composed to build any design, directly in your markup.
How to get started with Tailwind CSS?
You can use this framework using tailwind CDN. Also, you can see the full documentation on the installation section of the tailwind website.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
If you want to use most of the features of the tailwind you must use the PostCSS plugin.
While using CDN there are lots of limitations.
- You can’t customize tailwind’s default theme.
- You can’t use any directives like @apply, @variants, group-focus, etc.
- Third party plugins are not supported.
- You can’t use tree-shake unused styles.
Benefits and Drawbacks
Benefits
- It is highly customizable.
- It has common utility patterns.
- It gives full control over styling.
- It enables building responsive layouts freely.
- Easy component creation and speeds up development.
- It provides additional features.
Drawbacks
- It takes time to learn.
- Small community and poor documentation.
- Styling and html are mixed.
- Lack of important components.