Hello everyone, many of you are wondering if there is any other CSS framework that can replace Bootstrap or not? In my opinion, there are currently many different CSS frameworks, but Bootstrap , Foundation is still the father, the endless inspiration of other CSS frameworks. Recently, we have seen on the market something called Tailwind CSS that helps build websites quickly with the CSS properties that have been assigned to separate classes, when used, we only have to call to use. So the question is why don’t we use Bootstrap to make it traditional? Certainly this CSS framwork must have a strong point what will it be for front-end programmers to use? We will take a look at some of its pros and cons.

What is tailwind CSS?

It is a utility-first CSS framework, it is like Bootstrap, it has built-in classes that we can use. Tailwind CSS has many classes including important and different CSS properties, we can easily extend to create new classes with its own classes.

Why should we use Tailwind?

In general, it is similar to Boostrap but one convenient thing when using this framework is that we have many newer classes more convenient than Boostrap. You can refer here in Tailwind. And what’s more, there are more classes, but with the user-friendly naming rules, users can look at that class and know what this class is all about. We also have to talk about high customization and scalability, which gives us unlimited flexibility.

Install Tailwind in Nextjs

Here I will introduce you how to install Tailwind in Nextjs. If anyone uses Nuxtjs, you can do the same, in a certain angle I see that these two are basically the same.

First you have to create a Nextjs project

Next we will install tailwind and a few other packages used to complie the CSS

And we also need to install the next-css plugin

Once we have started the nextjs project, we will create a postcss.config.js file to require the tailwindcss and autoprefixer plugins.

Next in the next.config.js file we will configure the following

In the package.json file, you insert this script as follows

In the assets folder in your project, create styles/less/tailwind.less

Then you create more app.less with the content

I do not want to introduce each class in tailwind css , it will be time consuming and boring. Instead I will try to create a page and style according to the class, then I will talk specifically for you guys. hehe. Now we will go to the page folder and create a demo.js file

We will then turn on npm run dev , type the path, and the result will be as follows

I will go through a few classes as follows: First, we want to create the menu bar, then we will have to create a div with class flex container to contain all the elements in that menu bar, that’s the logo. , navigation like Home, Service, Project, Team, About, Contacts. And let’s not forget the padding style and background for the py-4 menu bar, adding padding for the top and bottom with the parameters py-1 ie padding-top and padding-bottom on each side 0.25rem, similarly we also increase gradually Up from py-1 to py-64, you refer here. Along with that is the bg-orange-900 which is the css background-color attribute in orange and 900 is the intensity of the orange.

We will first come to the logo, we will use the class ml-10 to worry about 2.5 rem from the left margin. and when you hover over this logo icon, the mouse will change to a hand shape when we have the cursor-pointer .

The word Viblo we want to increase the font-size, use the text-3xl class, the font color is relatively light text-blue-200 and a little font-weight: 600 font-semibold

Icon 3 tiles are styled with visible class when the screen width is below 768px, when the screen is bigger, the icon of these 3 tiles will be hidden with md:invisible class. Notice, in tailwind css, when we want to be responsive for screens, we just need to add the prefixes sm:, md:, lg:, xl: before the classes. You refer to more responsive here .

Next is the Home navigation component, Service, Project, Team, About, Contacts, We see most of these navigation links have the same class style but the Home component will be slightly different. by adding style cursor-default . And it should have been a drop-down list, but because of the hidden class, when the screen is 768px or less the list will be hidden, and when the screen is above 768px, the list will appear horizontally with the class md:flex overflow-x-hidden .

New when using Tailwind CSS

As you know, when we use this framework in addition to more classes for us to style, we can also reuse build-in classes in this framework to write a new class. That is when we use the keyword @apply .

Now that we open the assets / styles / less / app.less file again, we will write the following css for the class

And then after you change the code to the following, you will get the same results as the original

This can be said to be a unique feature that I like the most in this framework, because it helps me to use the built-in classes of the framework in a new class, so our code looks a lot cleaner. If using Bootstrap, I will have to write all the built-in classes of the framework I need on that card, so looking at the front-end code I don’t look very neat at all.

Next, you can generate responsive , hover , focus , active , group-hover these classes by we will write in the css file, wrap them with @variants

For example

Writing 1 that produces many things like this, is short and effective.

Next to responsive it is similar

Using the theme() for you to access is to retrieve the value in Tailwind config . For example, you have the file tailwind.config.js as follows: