Why I Use Tailwind CSS

After using CSS-in-JS, Global Stylesheet and Tailwind CSS with what it provides with many features

Tailwind is a utility-first CSS framework that lets you add styles to your web pages without writing a single line of custom CSS code.

But also everything from colors to spacing sizes and fonts can be customized really easily using the config file. No more fighting the framework, trying to figure out which classes to override to get results you wanted.

Set your utilities

Use Tailwind's @apply directive to extract repeated utility patterns into custom CSS classes just by copying and pasting the list of class names.

Dark Mode Config

You can provide great UX for people when they open it on their phone at 2am as the darkmode will be on already.

Responsive everything

Select a screen size in front of literally any utility class and watch it magically apply at a specific breakpoint.

PurgeCSS

Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be.

Ready-Made Components

Tailwind provides a collection of beautiful, fully responsive UI components. It's got hundreds of ready-to-use examples to choose from, and is guaranteed to help find the perfect starting point.

Great Upgrade Path

Tailwind's future is very bright. New updates come frequently. These add new CSS properties that are coming out for modern browsers.

Tailwind CSS with React Native

Using Tailwind CSS in your project provides unification of the whole codebase. Instead of giving custom names to the styles in StyleSheet.