Design and customize your website rapidly
with Tailwind CSS Framework

What is Tailwind CSS?

Normally when you want to make your website beautiful, you may use a CSS (Cascading Style Sheets). Anyway, almost no one creates the CSS from the beginning in current website development because it quite takes time to do so. This brings about various CSS frameworks e.g. Bootstrap, Foundation, Bulma. These CSS frameworks provide classes for developers with the concept of sematic-based CSS.

In case you want to get a different look and feel of your website from what the framework provides, you have to write additional classes by yourself. However, this will cause code scattering and it might become difficult to maintain the code. That’s why Adam Wathan (A creator of Tailwind CSS) built Tailwind CSS as a utility-first CSS framework. Tailwind CSS is highly customizable and it can help you to develop a website quickly.

A sample of using Tailwind CSS

If you create a semantic-based CSS to build a component like this image, the source code will be as follows.

However, if you use Tailwind CSS, the source code will be like this.

You have no need to write more CSS because the framework has already provided all you need.

This is just a simple example to show that Tailwind CSS can help you a lot to reduce coding time.

Advantages of Tailwind CSS

  • You can design a website faster than writing CSS by yourself.
  • Every display on the website can be controlled easily.
  • Very flexible and customizable.
  • Tailwind provides tools to minify and compress CSS file size so the website can display the result faster.

Remarks of Tailwind CSS

  • Need time to study classes provided by Tailwind CSS
  • It provides ready-made components on https://tailwindui.com/
  • Class name of the component is very long if there are many subclasses.

This is just an idea of how Tailwind CSS works. It is also recommended by many developers, so don’t you think it’s worth using?

Reference:

https://tailwindcss.com/

https://tailwindcss.com/docs/

Read more:

What’s new in Bootstrap 5

Wireframe tools for website and application designer

What is UX/UI Design?