A quick look at Tailwind CSS
January 02, 2021
What is Tailwind CSS?
Tailwind CSS is a CSS framework that allows you to design using generic classes provided by Tailwind CSS. Unlike other CSS frameworks, it is easy to design in detail.
<h1 class="text-bold text-gray-900">Title</h1>
Features
- Apply existing classes directly to HTML and styling of elements
- All unused CSS can be automatically removed during production build.
- Use the Responsive Utility Variant to build an adaptive user interface.
- Use the utility to style elements such as hover, focus.
hover:,focus:,active:,disabled:,visited:,checked:,first:,odd:, etc. - Dark mode is also easy to implement.
- Tailwind CSS is licensed under MIT and is free for personal and commercial use
Demerits
- Cannot use the full functionality of the latest CSS (since it is a framework)
- HTML is messy (too many classes)
Supported browsers
- Designed and tested for the latest stable versions of Chrome, Firefox, Edge, and Safari; does not support any version of IE, including IE11
- Vendor prefixes can be automatically assigned.
How to install
- See the official website for installation instructions.
Official Plugin
- @tailwindcss/typography: Provide typography
- @tailwindcss/aspect-ratio: Provide a configurable API to give elements a fixed aspect ratio.
- @tailwindcss/line-clamp: Provide a utility to visually truncate text after a fixed number of lines.
- @tailwindcss/forms: Provide a basic reset of form styles to allow form elements to be easily overridden by utilities.
Links
- Tailwind's official Blog
- Tailwind Weekly: Weekly newsletter on all things TailwindCSS
- Awesome Tailwind CSS: Tailwind's Awesome List
- Built with Tailwind: A collection of great websites built with TailwindCSS
Tools
Color
- Tailwindink: Color generator for Tailwindcss
- Gradient Designer: Tool for checking Tailwind gradients.
- Hypercolor: Collection of gradients using Tailwindcss
Editor
- IntelliSense: Intelligent TailwindCSS tools for Visual StudioCode
- Prettier Plugin Tailwind: A tool that uses Prettier to sort Tailwind classes in HTML.
Component
- Tailblocks: block collection in tailwindcss
- Tailwind Components: Free Component Collection
- Tailsind UI: The official Tailwindcss Component collection. Paid.
- Tails - TailwindCSS Page Creator: The official Tailwindcss Component collection. Some are paid.
Develop
- Tailwind CSS Cheat Sheet: Cheat Sheet
- Tailwind Play: Playground