# Building With Tailwind CSS: A Mobile-First Design Approach

**Introduction**

In recent times, I don't think anyone can claim to be a proficient Frontend developer without a solid understanding of Tailwind CSS. It makes designing very easy and flexible. Though for you to be able to write Tailwind properly, you must have a foundational knowledge of vanilla CSS.

Before now, I’m always left out when the discussion on Tailwind comes up and I have always desired to know what it is all about. To my greatest surprise, it is not all magical as some people makes it look. The learning curve isn't as steep as I initially feared. For me I will say it is vanilla CSS in a short form, let's say "vanilla CSS on steroids"

Right now, I have dived into the world of Tailwind CSS and in this article, I will share my experience and what I have learned so far.

**What is Tailwind CSS?**

Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS for every element like (.button, .header), you primarily use predefined styles directly in your HTML. Hence you will end up having your HTML and CSS in a single file. It is similar to inline styling only that you are using already defined classes.

Think of Tailwind as a shorter version of CSS. Instead of writing `margin: 8px`, you can simply write `m-2`, and the effect will still be the same. In Tailwind, most properties are written in short form. Examples: margin-left is mr, padding is p, background color is bg etc.
Mobile-First Approach.

One of the most important things I've learned about Tailwind is its mobile-first approach. By default, the classes are applied to small screens. From there, you can scale up unlike vanilla CSS that needs media query to achieve this. You can then customize the styles for larger screens using breakpoints like md, lg, xl, sm, 2xl, etc. With this method, you rarely have bussiness with media queries. Even if you need to write media query, it will be less cubersome. This encourages you to think about responsiveness from the very beginning of your project design.

Example:

  <div class="bg-red-600 text-center md:bg-green-500 p-4 rounded-lg">
      hello
    </div>

Results


The code produces a div with;
* background color of red
* Text centered
* Padding of 4 units which is 16px
* Border radius of 50%
* and the background color of green if we are on a medium screen upwards.

There are different breakpoints in Tailwind, for example "sm" is min-width of 640px, lg is min-width of 1024px. You can also customize your own breakpoints if you don't wish to use the custom ones.

Tailwind breakpoints

This simple code example demonstrates how easy it is to control the layout and styles based on screen size. The bg-red-600 class applies to all screen sizes by default, while md:bg-green-500 overrides the background color for medium screens and above.

The image below is a student dashboard that I built with Tailwind CSS. This project gave me so much satisfaction and sense of fulfilment

**codebase**: https://github.com/marycynthia2020/Student-dashboard


**How to get started with Tailwind**
I know the quetsion on your mind right now is how to get started using Tailwind. Relax, It is very simple. You dont need to memorize all the commands to set up your project, simple navigate to [Tailwind documentation ](https://v3.tailwindcss.com/docs/installation)and choose which setup method you wish to use. One of the qulities of a good developer is learning how to read a documentation. So make sure to explore the documentation. It is easy and straight forward. Once you have the foundational knowledge of CSS, you are good to go.

I will also recommend going through the [Tailwind cheat sheet](https://flowbite.com/tools/tailwind-cheat-sheet/) provided by Flowbite. It provides you with

**My Key Learning Takeaways**

From my little experience learning Tailwind for the first time, I will share some tips that will help anyone that wants to get started with it.

**Learn basic CSS first**: I can tell you for free that you can't jump into Tailwind without basic knowledge of CSS. Don't even try it. Be comfortable writing vanilla CSS first and Tailwind won't be a problem.

**Always consult Tailwind Documentation:** Don't be deceived, you will never know it all. Make Tailwind documentation your friend. Any property that you need, search for it in the documentation, it will tell you the matching Tailwind property. The more you write, the more you get to know more properties. Use this [link](https://v3.tailwindcss.com/docs/installation) to access the documentation.

**Customization is Allowed:** Though Tailwind provides a ton of pre-built classes, you can also customize it to fit your project. You can do this in the tailwind.config.js file. Also, if the value you want for a property is not predefined, you can make use of your own value with the help of a square bracket. E.g, `m-[3px], w-[95%], h-[11px]`. This is the same as saying `margin: 3px`, `width:95%` and `h-11px`. So, you can always balance your Tailwind with regular CSS.

**Conclusion**
I'm still in the process of learning Tailwind, but I'm impressed with it so far. Tailwind speeds up development with its mobile first approach. It takes a little time getting used to it, but once you build projects over and over with it, you'll see how much faster you can develop. Make sure you get familiar with common properties like m-, p-, bg-, text-, font-, border-, rounded-, flex-, grid- etc. These are the building blocks of styling with Tailwind.

I will also recommend installing an extension known as Tailwind CSS Intellisense. With this tool, you can hover around your applied styles to see what they are actually doing. It also does the work of suggesting once you type a style.

**Resources**
Get started with Tailwind CSS
https://v3.tailwindcss.com/docs/installation

Tailwind CSS Cheat Sheet
https://flowbite.com/tools/tailwind-cheat-sheet/