Tailwind CSS

Getting started with Tailwind CSS. Build user interfaces with efficiency and ease.

What is Tailwind CSS?

Tailwind CSS is a utility CSS framework that lets you implement styles with inline code. Using tailwind, all of your styling is done efficiently within your HTML.

Tailwind is not a substitute for a CSS framework such as Bootstrap where all the UI components are designed for you. Instead, tailwind uses a utility based approach to allow the developer to build and customize their own components. This makes it a bit less beginner friendly than frameworks like Bootstrap but in the long run is much more powerful in building complex UI designs.

You are in complete control with efficient and easy to understand syntax and it feels so good.

How it works

Tailwind CSS creates many classes that make it easy to implement any styling to your components. The syntax is shortened but easy to understand, especially with an understanding of CSS fundamentals. To build the styling of the component, much like Bootstrap you simply include all the tailwind classes that you want to include. For example, if you want to give a div component margin and padding, you would use the following code.

<div class="m-6 p-6>...</div>

Within this div component we added a class of “m-6” and “p-6”. The m stands for margin and 6 is the amount of units of margin there are. This unit is determined by tailwind and can be overriden in the tailwind.config.js file. Almost all tailwind classes function in a similar way. You update the elements style through abbreviated class names pertaining to css properties. The documentation explains all of the syntax which comes naturally to those familiar with CSS already. Tailwind CSS is intuitive and well built for understanding how to implement css properties in a clean and responsive way.

Responsive design is extremely simple in tailwind. You can use the breakpoints of xs, sm, lg and xl to apply different classes to different screen sizes. The specified breakpoint applies to every size that it matches and above. So for example if you had the following…

<div class="hidden md:block">
...
</div>

This would hide an element that is smaller than the ‘md’ breakpoint. This sets the display attribute of the element to “hidden” until a max-width of the md breakpoint and then the display attribute is switched to block. This is one way of many that tailwind makes it easy to make a website responsive!

Getting Started

For a complete guide on getting started with tailwind read the official documentation.

To get started, we must install several dependencies using the node package manager, or npm. This means that Node.js must be installed on your machine to begin.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Next we need to create the tailwind css configuration file.

npx tailwind css init

This creates a file called “tailwind.config.js” at the root of the directory you’re in.

Now with all your dependencies installed and your config file being set up, you’re good to start attaching tailwind to your project! You must include tailwind in your CSS by importing the tailwind components.

/* ./styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

If you are working with a JavaScript framework such as React you need to import tailwind css into your App.js file.

// App.js
import "tailwindcss/tailwind.css"

Now you’re all set! Explore the documentation and open a whole new world of possibility when creating a clean and customized UI in an efficient way.

Conclusion

Tailwind CSS is an awesome tool that makes life much easier for the experienced developer. Its popularity is well deserved and tailwind will most likely continue to grow over the next few years. With an awesome library of utility classes, tailwind is a must learn skill for any front end developer in 2021!