Getting Started With Tailwind CSS
By: Nikhil Swain
Tags: Tailwind Css, Webdev, Html Css, Programming, CSS

Creating the HTML File

We are done with setting up the tailwindcss for our project. Now, it’s time to write some HTML code and link the public/styles.css file to the index.html file.

Let's create a simple button for demonstration:

<button> Click Me </button>

To add styles to this button, we use the classes provided by Tailwind:

<button class="bg-blue-500 p-3 text-white font-bold rounded text-xl">Click Me</button>

Results of the above code

The following are the classes that are being used on the button element :

bg-blue-500 : To give a background color of blue. p-2 : To give padding of 0.5rem at the top, right, bottom, and left. text-white : To give text a white color. font-bold : To give text a font-weight of bold. rounded : To make the corners of the button rounded. text-xl : To give a font size of 1.25rem.

Navigation bar

Now that we know how we can apply Tailwind classes, let’s create our navigation bar:

Most of the classes used here are self-explanatory, but there are some classes that you may not know yet. Here's a brief explanation of those classes:

flex : Giving display of flex to ul element. justify-end , items-center : Same as justify-content: flex-end and align-items: center , respectively. text-center : Same as text-align: center .

You may wonder what sm: is. Here, it is used as a prefix on the flex property. The thing is that when you use TailwindCSS, you don’t have to write media queries anymore. Tailwind makes it way simpler to make your site responsive by giving you some utility classes for media queries as well.

These are the media query classes with breakpoints provided by Tailwind:

Tailwind media query classes with respective sizes

Note: Tailwind uses a mobile-first breakpoint system. According to the docs, this means that “unprefixed utilities (like uppercase ) take effect on all screen sizes, while prefixed utilities (like md:uppercase ) only take effect at the specified breakpoint and above.”

Look at this small example:

<div class="w-12 h-12 bg-pink-300 sm:bg-green-300 md:bg-red-500 lg:bg-blue-500"></div>

The element will be pink for all screen sizes until there is a breakpoint.

Most often, people get confused with the mobile-first layout system and use the sm: class to style mobile designs, which is incorrect. To target the mobile screen, don’t use any prefixed utility class.

In the same way you can use pseudo-classes such as hover , focus , etc.

<button class="bg-blue-500 p-3 text-white font-bold rounded text-xl hover:text-black hover:bg-blue-700">Click Me</button>

Coming back to our navigation bar, you can see a lot of Tailwind utility classes are used in the anchor tag and repeated again and again for all the anchor tags. This makes our HTML look a little bit messy and may become a burden to maintain our classes. To solve this problem, we can extract components.

Extracting components

Tailwind gives an @apply directive to easily extract common utility patterns to CSS component classes. The way we can use this directive is by giving any name to our component (which we will use as a class name in index.html ) in public/styles.css and writing down the Tailwind utilities we want to be applied.

Now copy all the classes (except block and inline-block ) from our anchor tags and make a component by giving the name anchor .

Extracting components in public/styles.ss

Here, you can see that the CSS class anchor is being defined by using the @apply directive. To make the changes and use the anchor tag, we have to perform the build process once again:

npm run build

And now, we can use this class in our HTML code:

Note that I used the class h-h10 . This is not a class provided by Tailwind itself, but it gives us the option to expand and customize some properties on our own. I have given a height of 10vh to the h-h10 class to use it in the nav element. You can customize the height in the theme.height section in tailwind.config.js .

/* tailwind.config.js */ theme: {

height: {

h10 : "10vh",

h90: "90vh",

},

In addition to writing component classes directly in your CSS files, you can also add component classes to Tailwind by writing your own plug-in. Check out how you can do it in the official Tailwind documentation.

So far, we have created our navigation bar using only Tailwind CSS utility classes. For the whole project source code, check out the GitHub repo.