--- cover_image : https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1n5zoreewwn1w89qyus.png title: Simple guide to make you know Tailwindcss published: true date: 2023-01-25 21:10:20 UTC tags: canonical_url: https://idisepraise.hashnode.dev/simple-guide-to-make-you-know-tailwindcss --- Hey there, in my [previous](https://dev.to/kevvve/complete-guide-on-how-to-install-tailwind-css-via-npm-9mh) 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; ```

Tailwindcss

``` 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. | CSS property and value | Tailwind utility class | | margin:1rem | m-4 | | padding:1rem | p-4 | | display: flex | flex | | flex-direction: column | flex-col | | color: red | text-red-500 | | font-size: 2rem, line-height:1rem | text-2xl | 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 1. You won't stress over creating new class names. 2. It helps you understand CSS better. 3. It prevents unused CSS from getting shipped to production. 4. You can make changes easily without fear of breaking something else. 5. You can understand any project using Tailwindcss for styling. 6. It will help you build web pages faster. 7. Helps you add responsive design easily. 8. It makes your styling look professional and consistent. 9. it is easier to maintain HTML than a CSS codebase. 10. It gives you total control over your styling, unlike other CSS frameworks. # Disadvantages of using Tailwindcss 1. You have to learn different Tailwindcss class names. 2. Your HTML may become too rowdy. 3. 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](https://tailwindcss.com/docs/utility-first). 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; ![old tailwind config file](https://cdn.hashnode.com/res/hashnode/image/upload/v1674546662812/3ec5ad52-1e64-44b5-bbaf-0f84b0857d3d.png) 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. ![image showing tailwindcss full config file](https://cdn.hashnode.com/res/hashnode/image/upload/v1674547687887/86e9bd53-a082-4fa7-b374-7553134e3204.png) The new config file should look like this; ![tailwind new config file](https://cdn.hashnode.com/res/hashnode/image/upload/v1674548100179/6ec05b38-76ce-434b-909c-baf36b651fad.png) 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. ![Tailwind blank config file](https://cdn.hashnode.com/res/hashnode/image/upload/v1674557833030/f820124e-83a0-42a6-b1e9-f938e552cfd7.png) 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](https://www.google.com) 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](https://fonts.google.com/specimen/Montserrat?query=montse&thickness=7#styles). - 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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674675923776/adef00fd-043b-40de-bfb0-99d9d9eb2de6.png) The code block below is the complete code for the landing page. You can copy it to your project body and inspect it properly. ```

Google

Google offered in:

Hausa Igbo Ede Yoruba Nigerian Pidgin

``` # 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 👋🏽

kevvve

Simple guide to make you know Tailwindcss

Join Our Newsletter. No Spam, Only the good stuff.