How many times have you created a website and had to think of a suitable class name for the HTML component? not to mention that when the website grows, you have to remember and create a new class name again.

Take it easy! now there is Tailwind CSS, at first, you will find it strange, but after a long time using it you can feel developing website designs without the need to switch between HTML and CSS pages because Tailwind provides various classes that are ready for us to use without strange and specific names.

Tailwind CSS is a CSS framework that offers a new concept with the concept of utility first where you no longer need to think about the length of class names for HTML components. Tailwind consists of class names that are quite intuitive to use.

Let’s get started!

What is Tailwind CSS?

Tailwind CSS was created by Adam Wathan, a person who is quite famous in the Laravel community with several courses. This time he offers a new concept that is different from Bootstrap, Bulma, or other CSS frameworks through Tailwind CSS.

The website and the documentation itself are really pretty and it’s easy to find something, you should try the Tailwind documentation.

In addition to complete notes for each attribute or class name that can be used, there is also a tailwind playground for you to start playing with the class in the browser without having to use your own text editor.

The following is an example of a comparison of tailwind itself compared to the old way (specific class naming). An example of creating a chat notification element.

Examples of specific class names

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div><style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

If you use tailwind it will be like this

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

If you are interested, let’s start learning!

Getting started with TailwindCSS

From here on out, I’ll call TailwindCSS is Tailwind, OK!
Tailwind has good documentation from installation to development.

Moreover, Adam Wathan recently added the Algolia search engine. So it will be more comfortable in learning Tailwind.

To install Tailwind, you can install it via NPM or Yarn. If you are not used to using the two package managers, then get used to it. Make sure you have Node.js installed wherever you are because it is not impossible that you will use it all the time.

Install Tailwind

You can start by creating a new folder by running the following command:

mkdir tailwind-folder
# change directory
cd tailwind-folder

then you must to add Tailwind as dependencies via one of the package managers — Yarn or NPM.

# NPM
npm install tailwindcss --save-dev

# Yarn
yarn add tailwindcss --dev

The above command will add Tailwind as devdependencies to the package.json file.

Adding Tailwind to CSS files

Tailwind has a directive that aims to make it easier for you to add Tailwind code along with your CSS code. Add the following code to the top line of your CSS code:

@tailwind base;

@tailwind components;

@tailwind utilities;
/** Your CSS code **/

The directive will not be read by the browser directly, therefore the directive will be transformed into CSS code by Tailwind CLI.

Assume your CSS file name is style.css , then transform or process your CSS code with Tailwind CLI with the following command:

npx tailwind build styles.css -o output.css

With the method above, you need to run the command every time you make changes to your CSS file. To avoid this, you can do another way to process Tailwind into CSS. You can use PostCSS, Webpack, Gulp, or Laravel Mix.

Tailwind CDN

Tailwind can be installed via CDN, you know! Like most libraries or frameworks in general, it must have a CDN so that it can be easily installed.

But, sadly, there are some things you can’t do when using a CDN, including:

• You can’t customize the default Tailwind theme
• You can’t use the Tailwind directive
• You cannot enable features that are disabled by default
• You cannot install third-party plugins

Preflight

HTML has a default style for each element. For example div, this element has a default CSS declaration, namely display: block; .

For a complete list of which elements have default styles, you can see them here.
Each browser has its own default style, including:

• Internet Explorer
• Firefox
• Opera
• Chrome / Webkit

Regardless of whether the CSS defaults are up to date or not, but the essence is that every browser has a default style for every tag in HTML.

Of course, you can imagine, when you build a website and access it in a different browser, then some of the elements that you have styled before turn out to have a slightly different appearance because they are “mixed” with the browser’s default style. Then the appearance of your website will be inconsistent — although not much.

To solve this problem, CSS frameworks or libraries generally have a base style, which aims to override the default style in each browser. That way, elements in HTML will have the same default style in every browser.

Tailwind has its own base style, named “preflight” or previously named “base”.

Tailwind uses a third-party library to do this, namely using Normalize.css. You can see which elements are default styled by Tailwind here.

Color On Tailwind

Tailwind provides a wide range of color palettes. Even each color can be set the level of transparency. Each color has 9 levels of transparency.

For example, the color blue:

With this, you have no limitations in using color. So, you will be freer in making components.

Try Using Tailwind

Now that we know how to set up Tailwind, it’s time for us to try building some components with Tailwind.
Tailwind divides its utility classes into 11 categories. Of the 11 categories, there are several utility classes under it, and I will not discuss all the utility classes under it, but will only discuss some utility classes that need to be explained. Because other utility classes have the same functionality as CSS in general.

The 11 categories include:

A. Layout

In this category, there are several properties that are certainly related to layout, including: container, display, float, object-fit, object position, overflow, position, visibility and z-index.

A.1. Container

Similar to Bootstrap, Tailwind also has a container and the function is the same, namely to wrap elements in it and set the min-width and max-width at the current breakpoint. The difference is, the container in Tailwind is not automatically centered; to make it centered, you must set margin-left and margin-right to auto . In Tailwind this can be solved by providing a utility class mx-auto , which means margin-x or margin-horizontal and more precisely giving CSS declaration margin-left: auto; and margin-right: auto; .

A.2. Display

Like CSS basically, Tailwind also allows you to set display properties, such as block , inline , inline-block , flex and others. To use flexbox, Tailwind has documentation that is even more specific about flexbox.

A.3. Top / Right / Bottom / Left

I did not mention this section above, because it was a bit complicated to write it down. This utility class is used in conjunction with position — be it absolute, relative or fixed. This utility class is to set the left , right , top and bottom properties. Here are some class names including:

A.4. Z-index

Of course, you already understand this utility class for what it does. Like CSS basically, this utility class is for managing stack order — like the layers panel in PhotoShop design software or something else. This class will reduce the use of custom classes.

B. Typography

All the classes in this category to set typography, such as font-size , font-family , color , font-weight , word-break , letter-spacing and many more.

B.1. Color

As we discussed earlier, that Tailwind provides a color palette and each color has a level of transparency. Just like setting the background color, to set the text color also Tailwind has a similar class name.

B.2. Font Family

For fonts, Tailwind has 3 options by default, namely font-sans, font-serif and font-mono . As we discussed earlier, Tailwind is highly customizable, so you can add another class name to set the typeface.

B.3. Font Size

You cannot set the font-size arbitrarily. However, Tailwind has managed it by providing several class names, as follows:

C. Backgrounds

Tailwind also provides a utility class to set the background. But, of all the utility classes available to set the background, you still need to create a custom class or inline style to set the background-image. Because to set the background-image you need to specify the image to be used.

Some of the utility classes available in the backgrounds category are background attachment, background color, background position, background repeat and background size. All utility classes that are relevant to the background are preceded by the name bg-* , for example: bg-cover to set the background size to cover .

D. Borders

In this category, there are 4 different utility classes, including: border color, border style, border width and border radius.

D.1. Border Color

To set the border color, it’s like setting any other color in Tailwind. The difference is, to set the border color is to start with the name border-* , for example: border-blue-600 to give the border color to blue with a level of 600.

D.2. Border Radius

Unlike background, not all border-relevant class names begin with the name border-* . To set the border radius on Tailwind, we need to use a class name that starts with the word rounded , some of which are:

E. Flexbox

As I mentioned earlier that Tailwind has its own category for discussing flexbox. This category consists of several utility classes, including: flex direction, flex wrapping, align items, align content, align self, justify content, flex, flex grow and flex shrink.

F. Spacing

In this category basically only consists of padding and margins. However, to set a negative value for the margin, Tailwind separates the class name from the normal margin. So, this category consists of padding, margin and negative margin. To set the padding, the class name begins with p and continues with side and size, so the format is like this: p{size?}-{size} .

Similar to padding, to set margins also use the same way. The difference is, the margin starts with m . Similar to margin, to set negative margin is the same way, the difference is that negative margin starts with -m , for example: -m-5 to provide CSS declaration margin: -1.25rem; .

G. Sizing

All utility classes in this category are basically for setting the height and width only. However, as we all know, CSS has min and max on the property. So this category consists of width, min-width, max-width, heigth, min-heigth and max-heigth.

To set the width, you need to use a class format like this: w-{number} . For example: w-10 to provide CSS declaration width: 2.5rem; . To set the height in Tailwind, use the same format, except that w is changed to h . Meanwhile, to set the min and max of the two utility classes by adding min- or max- .

H. Tables

This category only consists of 2 utility classes, namely border collapse and table layout.

I. Effects

Just like tables, this category has 2 utility classes, namely shadow and opacity. Tailwind has at least 8 classes to set the shadow, including,

Some of them will also have a display like the following:

As for opacity, Tailwind provides at least 5 utility classes, including:

and will have a display like the following below

J. Interactivity

This category consists of utility classes that are relevant to interactivity, including appearance, cursor, outline, pointer events, resize and user select. With these utility classes you can set the cursor type, set the element’s response to pointer events, set whether the user can select text in an element and set other interactivity.

K. SVG

The last category is SVG. This category consists of only 2 utility classes, including fill and stroke. And each only has 1 class in it. Fill only has fill-current to set the SVG’s fill color to the “current” text color. For example:

Of course we will not try one by one, what we will learn is the concept of using Tailwind. Therefore, we will try to create some components for the exercise. That way, you’ll understand how to build your own components.

Creating Button Components

It starts with a button. We will create 3 types of buttons, including: primary, secondary and tertiary.
First, we will create the primary button.

<button class="bg-blue-600 text-white px-4 py-2 rounded">
  Button
</button>

So the result is as follows:

Responsive Design

With the responsive design feature, you can set a utility class for each breakpoint. At least Tailwind provides 4 breakpoints, namely sm, md, lg and xl .

• sm applies to devices that are at least 640px wide
• md applies to devices that are at least 768px wide
• lg applies to devices that are at least 1024px wide
• xl applies to devices that are at least 1280px wide

To use it in conjunction with the utility class, we need to add it before the utility class, the format is like this: sm:{utility-class}, md:{utility-class}, lg:{utility-class}, xl:{utility- class}.

<p class="text-blue-900 sm:text-red-900">Hello, bro!</p>

With the code above we will have blue text on all devices, and the text will turn red when on devices that are at least 640px wide.

You can also specify utility classes for multiple devices at once.

Tailwind Development

If you want to know firsthand about Tailwind’s development, you can follow Adam Wathan’s Twitter account or TailwindCSS.

So, Adam and Steve Schoger are building a prototype for component pre-design. Later Tailwind will have many pre-designed components; each component will be able to customize the color and typeface. So that way everyone who uses the same component will not have the same look, because it can be customized — although it will most likely stay the same too because people are usually lazy to customize.

Conclusion

Congratulations you just learned TailwindCSS!

Learning something new sometimes seems scary because we listen too much to other people’s assumptions about something new. To overcome things like this, we just need to try it ourselves, that way we will have our own assessment of something new.

This time we have learned something new and the framework is still new. Although this Tailwind still has some shortcomings, such as not having utility classes for transition, pseudo-selector, transform, and so on.

Hopefully, with this, you can use Tailwind for the next project that you will use. Thank you hopefully useful.

References

• Tailwind CSS Documentation
• Learn TailwindCSS in 30 minutes