Why I prefer TailwindCSS ?

What is Tailwind CSS ?

According to the official documentation, Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. You can write inline styling and achieve an awesome looking website without writing a single css line !

Tailwind CSS in simple words :

We’re able to do all our styling without leaving our HTML, just by adding utility classes. Incredible looking interfaces with only few lines of HTML !

What are Utility Classes ?

Utility classes are self-descriptive, single-purpose CSS classes. they can describe : Text sizes, colors, and weights Border colors, widths, and positions Background colors Flexbox utilities Padding and margin helpers

Utility classes serve as a single one-stop-shop for reusable pieces of code.

Key features of Tailwind :

• No default theme
• No built-in UI components
• No opinion about how your site should look.

this means it is highly customizable ! for example almost every website made with Boostrap look almost the same, unless there is some heavy CSS code to change the default styling. However, that’s not the case with Tailwind.

Tailwind and HyperColor:

Tailwind comes in with a variety of predefined colors which we can easily customize in the “tailwind.config.js” Gradient Colors with Tailwind are also extremely easy to do. for example : bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500

They even have a whole website [HyperColor] (https://hypercolor.dev) dedicated to their Color Gradients if you ever got confused !

Tailwind and Hericons :

Tailwind comes in with Heroicons a Beautiful hand-crafted set of SVG icons (with both outline and Solid styles).

Optimized Production :

Tailwind purge removes all unused CSS and @keyframes .

Think of Tailwind like a giant box of LEGO — you dump it all out on the floor and build what you want to build, then when you’re done you put all the pieces you didn’t use back into the box. Example of how to use tailwind purge :

// tailwind.config.js
module.exports = {
    purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
    ],
    theme: {},
    variants: {},
    plugins: [],
}

Provide an array of paths to all of your template files using the purge option as shown. Read the documentation for more details.

Should you use Tailwind ?

Go with Tailwind if you need a sleek design, a user interface where building with components will be important (because tailwind strongly favors component-based UI).

Conclusion

Building Components with Tailwind focus on the design and the looks of small components and makes them super reusable.

if you want to build micro-components in a elegant way, TailwindCSS is the way to go.