Hey there, in my previous article on Tailwindcss, we looked at simple steps to set up Tailwindcss in our HTML project. This is the second part of my last article and at the end of this article, you will properly learn how to use Tailwindcss by building Google landing page.

Tailwindcss Syntax

In my previous article, we examined the folder structure and files created when we install Tailwindcss. Also, as I explained in the last article, each time you add utility classes to your HTML or styles directly to your source CSS file; Tailwind rebuilds all your new styles into the output CSS file. So now, let's examine Tailwindcss syntax.

First, when you use Tailwindcss, it will be just like writing inline CSS. But you will write inline utility classes instead.
Tailwindcss has already combined most of the CSS properties and value you know into a utility class.
Different utility classes are used to apply different styles just like how CSS property does it.
So you will style webpages with a combination of different utility classes by adding them to a class selector in your HTML.

Let's imagine you want to apply margin, padding, flex properties, text size, line height and text color to a div.

In CSS , you do it this way;

div{
margin:1rem;
padding:1rem;
display: flex;
flex-direction:column;
color: red;
font-size: 2rem;
line-height:1rem;
}

In Tailwindcss, you do it this way;

  <div class=" m-4 p-4 flex flex-col text-red-500 text-2xl">Tailwindcss</div>

You can copy the above code into your project and start your live server to see how it looks.

Here is a table showing the above CSS properties and values with the corresponding utility class in Tailwindcss.

Both code examples will achieve the same results but you can see the Tailwindcss syntax is shorter and straightforward. I grouped font size and line-height because in Tailwindcss, a preset line height is automatically added for you each time you change the text size. Cool right? There are still many other benefits of using Tailwindcss and you have to use it to know better. But let's look at some below.

Benefits of using Tailwindcss

You won't stress over creating new class names.
It helps you understand CSS better.
It prevents unused CSS from getting shipped to production.
You can make changes easily without fear of breaking something else.
You can understand any project using Tailwindcss for styling.
It will help you build web pages faster.
Helps you add responsive design easily.
It makes your styling look professional and consistent.
it is easier to maintain HTML than a CSS codebase.
It gives you total control over your styling, unlike other CSS frameworks.

Disadvantages of using Tailwindcss

You have to learn different Tailwindcss class names.
Your HTML may become too rowdy.
You will have to install the package for each new project.

The only little work you have to do now is to get familiar with the utility classes by going over the official docs. They are very easy to understand and after you have used them to build a few projects, you'll get used to them due to muscle memory.

The Tailwind.config file

The config file contains all the default rules for all the utility classes. The rules are the values and properties controlled by the utility classes we use. e.g A rule sets text-2xl to be a font size of 1.5rem or m-4 to be a margin of 1rem. So we can extend the config file by changing the current rules or adding our own rules to control fonts, colors, spacing etc.

Enough talk, let's see how the config file looks. First, we are going to create the default config file and another config file for our customizations. I know we have a config file from the last article but I want you to delete the current config file so we can start from scratch.

So now, delete this config file;

Then enter this command; npx tailwind init --full in a new Terminal. The --full flag will enable us to create the config file containing all the default rules used by Tailwindcss.

The new config file should look like this;

You can see the file contains all the default values for our utility classes. For example when you use the sm utility class for screen size, Tailwind will apply 640px. So in your config file, scroll down to check how the rules are structured.

Even though we can add our own rules to the default config file, doing so is not good practice because it will make it difficult to differentiate our rules from the default rules. Instead, we could create a blank config file that still uses the default rules and then include our own rules inside of it. By doing it this way, we will only be able to see the newly added rules, making it simpler to manage.

So to create the blank config file, delete the default config file because we can't have two config files then enter this command in the terminal; npx tailwind init notice the --full flag is not included this time.

After entering the command, you should see a blank config file like in the image above. Remember to add the correct path to your source file inside the content property just like I did.

There is a process to follow when you want to add your rules to the config file.

You will follow the structure of how the rules are written in the default config file.
All new rules will be added inside the extend object.
Most new rules will follow this format

Building a webpage with Tailwindcss

The best way to learn to code is by practice so we are going to build a responsive Google landing page in dark mode. Here, I will show you how to add your customization to the config file. We'll be adding our colors and font to the config file and you will also learn how to use the utility classes in building a page.

Although there are default fonts provided by Tailwindcss, we will use Montserrat font for the project. I got all the details of the font from Google fonts.

First, add this import to the top of your source CSS file
Next, add the Font family to the extend object just as you see below:
Next, add the color to the extend property as well. We will use a shade of Black for the background color.

Even before applying any styles, all of the default browser styles (padding, margin, etc.) will be automatically removed when you begin a project with Tailwind. It will be something like this

The code block below is the complete code for the landing page. You can copy it to your project body and inspect it properly.

 <body class="font-mont h-screen pt-4 text-stone-100 bg-primary flex flex-col">
    <nav class="pr-8">
      <div class="flex justify-between items-center w-60 ml-auto text-sm">
        <div class="flex justify-between items-center gap-x-2">
          <a href="" class="hover:underline">Gmail</a>
          <a href="" class="hover:underline">Images</a>
        </div>
        <div class="flex justify-between items-center gap-x-2">
          <h1 class="w-8 h-8 border border-white"></h1>
          <div>
            <img
              src="./images/gprofilepic.jpg"
              alt="profile-pic"
              class="block rounded-[100%] w-full h-full"
            />
          </div>
        </div>
      </div>
    </nav>
    <header class="mt-2 mb-6">
      <h1 class="text-8xl font-bold text-center">Google</h1>
    </header>
    <main class="mt-8 mb-32">
      <form action="" class="mb-6">
        <div>
          <input
            type="text"
            class="border rounded-3xl block ml-auto mr-auto w-4/5 h-10 bg-transparent"
          />
        </div>
      </form>
      <section class="mb-8">
        <div class="flex justify-center gap-x-2 ml-auto mr-auto text-sm">
          <button
            class="bg-[#303236] w-36 py-2 rounded-sm capitalize hover:border border-gray-500"
          >
            Google search
          </button>
          <button
            class="bg-[#303236] w-36 py-2 rounded-sm capitalize hover:border border-gray-500"
          >
            I'm feeling lucky
          </button>
        </div>
      </section>
      <section>
        <div class="text-xs text-center flex justify-center gap-x-1">
          <p>Google offered in:</p>
          <p class="text-blue-300 flex gap-x-2">
            <span>Hausa</span> <span>Igbo</span> <span>Ede Yoruba</span>
            <span>Nigerian Pidgin</span>
          </p>
        </div>
      </section>
    </main>
    <footer class="bg-[#171717] text-gray-400 text-sm mt-auto pb-4">
      <div class="pl-8 p-4 border-b border-gray-500">
        <h5>Nigeria</h5>
      </div>
      <div
        class="pl-8 pr-8 flex flex-wrap justify-evenly lg:justify-between gap-8 pt-4"
      >
        <div class="flex gap-x-4 order-1 min-w-[30%] lg:justify-between">
          <a href="#">About</a>
          <a href="#">Advertising</a>
          <a href="#">Business</a>
          <a href="#">How Search works</a>
        </div>
        <div class="order-0 lg:w-fit lg:order-2 w-full flex justify-center">
          <p>Carbon neutral since 2007</p>
        </div>
        <div class="flex gap-x-4 order-3 min-w-[30%] lg:justify-between">
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Settings</a>
        </div>
      </div>
    </footer>
  </body>

Tips to increase your productivity

Download the Tailwind Intellisense extension in VS Code. The extension will assist you in autocompleting utility classes when writing them.
In most cases, the Intellisense may not work after installation. So before you write a utility class, always leave a space after the first quotation, as shown in the code below.
Even though the build command runs automatically and keeps an eye out for changes, you can manually run it if your change doesn't seem to be working. If it still doesn't work after being run manually, check and rewrite your syntax.
You can hover over any utility class to see its value in plain CSS
Exclude the node_modules folder when you want to host your site live.
The only way to master Tailwind is through practice, so build some projects to get plenty of experience.

Conclusion

I hope you have learned something new from this article. Please reach out to me if you have any questions or contributions. Until next time 👋🏽

Blog

Simple guide to make you know Tailwindcss

Idise Praise