Tailwind: Overview and Setup

What is Tailwind?

Tailwind, often referred to as Tailwind CSS is a set of low-level, reusable utility classes that can be used like building blocks to create virtually any design we can imagine. This utility-first framework covers the most important CSS properties (Gerchev, 2022). In other worlds, Tailwind has a ton of predefined CSS classes, styles, components and designs that make development easier.

Many different companies use Tailwind CSS including Starbucks, Netflix and Github (Wolstenholme, 2019).

The Tailwind Ecosystem

Tailwind Labs are the creators of the Tailwind ecosystem. In this ecosystem is the core product, Tailwind CSS. There is a vscode plugin to go with Tailwind CSS called Tailwind CSS intellisense to assist with development.

Tailwind labs have also created UI and design products that use and build off of tailwind CSS. These products include tailwind UI, and headless UI. Headless UI components can be created in React or Vue and Tailwind UI components can be created in React, Vue or HTML, but some components require the use of JavaScript (so React or Vue) and will not function properly if they are just created using HTML.

Tailwind labs have also created an icon set called Heroicons, which are open source and are used in their UI components. Last but not least, Tailwind labs have also written a book called Refactoring UI that discusses designing a visually pleasing UI and more.

There are also 3rd party UI systems that use Tailwind CSS but are not created by tailwind labs. One of the most prominent systems is called Daisy UI.

How does it work?

Now that weve covered the overview of tailwind and its ecosystem, how does it actually work? What does it look like to use Tailwind CSS code?

In most cases, you dont need to write your own CSS classes to style your components, because tailwind has already created them for you. This is a huge time saver.

Here is an example. In the first line of code, three different classes, with uniform naming conventions have been added to make the red box. These are all predefined classes already created in tailwind. The second line of code uses the exact same styles, with the exception of making the box blue instead of red, but does not use the tailwind utility classes.

In most cases the styles on the second line would have to be added to a class put in a CSS file and then that class could be added to the div. With tailwind, you never have to go to the CSS file to create the classes because they are already there! If you want to create custom CSS classes, you can still do that, but in most cases, there is no need to, which makes this easy and efficient.

Additionally, when coding, you can use the Tailwind CSS IntelliSense plugin to make the process easier to understand.

Using Tailwind

Knowing that tailwind has already created classes for almost anything you need to do and almost any style you need to apply raises a question:

Arent there going to be a ton of CSS classes created that will never end up being used?
The answer is yes, but this wont be a problem.

When you are coding, you have access to all of the possible tailwind utility classes, but tailwind is smart, and it will scan your code and create a production CSS file that only contains the classes you are using, and gets rid of the classes you arent, making your CSS file much smaller in production.

A Complaint about Tailwind

Here is a complaint that some have about Tailwind. From the Medium article: Why Your Friends Cant Shut Up About TailwindCSS And Why They Never Will by Jorge Zreik he writes:

...one of the biggest criticisms of Tailwind, is the fact that Tailwind styles are NOT reusable.
Whereas with traditional CSS you can combine all the styles for a heading, including size, font color, etc, in a single class, in Tailwind you have to write them all out individually (Zreik, 2022).

In the previous example, the code for the red box div was pretty simple. But, once you add more styles to the div, there are suddenly way more classes and the code doesnt feel as simple anymore. With traditional CSS, you could just combine all of these styles into a single class.

This issue isnt the end of the world because it is still faster and easier to make the div using Tailwind styles as opposed to making them on their own, but the code is less readable now.

The real problem arises when making a second or third red box. Now 10+ classes from the box have to be copied to duplicate it. After a while, this is going to get pretty annoying.

Reusable JavaScript

There has been a lot of talk about the Tailwind ecosystem and reusable CSS classes but where does JavaScript fit in here?

From the Medium article: Why Your Friends Cant Shut Up About TailwindCSS And Why They Never Will by Jorge Zreik he writes:

Basically, you can make your styling reusable by making your components reusable. This is what you should be doing anyway now that many people are building with tools like React where modularizing functionality is already the norm.

By modularizing your styles as components rather than classes you get rid of many of the problems people see in Tailwind (Zreik, 2022).

To break this down further, UI elements that are going to be reused should be made as components. You write the code once in JavaScript and now you dont have to copy a million Tailwind utility classes every time you want to reuse a UI element. The end resulting, production code might still look pretty messy, but when you are actually coding you are using JavaScript to inject code from components into your HTML and now the development process is a lot cleaner and the complaint from the previous section is much more minor.

Setting up Tailwind

As is described in the Tailwind CSS installation Docs, (Tailwind, n.d.) here are the steps to install and set up Tailwind CSS using the command line.

Step 1: Install Tailwind CSS

Enter these commands in the terminal while in your project directory

npm install -D tailwindcss
npx tailwindcss init

Step 2: Configure Tailwind CSS

Once the commands from step 1 have been run, you should see a tailwind.config.js file in your project folder.

From within the tailwind.config.js file, you will want to add the following code:
./src/**/*.{html,js}

Step 3a: Create Project 'src' folder and CSS file

Once the Tailwind config file has been set up, a 'src' folder will need to be created.
From within the SRC folder, a CSS file called 'input.css' should be created.

Step 3b: add Tailwind to CSS file

From within the 'input.css' file, paste the following code:
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4: Start building your Tailwind CSS output file

Use the command npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch to build your CSS output file

This command will create an 'output.css' file that will update as you use Tailwind classes in your project.

Step 5a: create a html file

In your projects 'src' folder, create an 'index.html' file.

Step 5b: Add the stylesheet to your html document

Add <link href="https://dev.to/dist/output.css" rel="stylesheet"> to your html documents

Working Code

Below is a screenshot of a login page styled entirely with Tailwind CSS utility classes as well as the HTML used to create the page.

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <link href="/dist/output.css" rel="stylesheet">    <title>Login</title></head><body class="flex items-center justify-center h-screen">    <div class="bg-slate-100 max-w-md rounded-md p-5">        <h1 class="text-3xl font-bold mb-7 text-center">Sign In</h1>        <label for="email">Email</label>        <input class=" mt-1 w-full mb-4 p-4 rounded-md h-9 bg-white border border-gray-200 focus:outline-blue-500" type="text" id="email" placeholder="Enter your email">        <label for="password">Password</label>        <input class="mt-1 w-full mb-9 p-4 rounded-md h-9 bg-white border border-gray-200 focus:outline-blue-500" type="password" id="password" placeholder="Enter your password">        <button class="w-full bg-blue-400 h-10 rounded-md font-medium hover:bg-blue-500 active:bg-blue-400">Login</button>        <p class="w-full text-center my-4 text-slate-500">or</p>        <button class="w-full bg-slate-200 h-10 rounded-md font-medium hover:bg-slate-400 active:bg-slate-300">Login with Google</button>        <button class="w-full bg-slate-200 h-10 rounded-md font-medium hover:bg-slate-400 active:bg-slate-300 mt-2">Login with Facebook</button>        <div class="flex justify-between mt-2">            <p class="text-blue-500 hover:cursor-pointer hover:text-blue-600">Sign Up</p>            <p class="text-right text-slate-400 hover:text-slate-700 hover:cursor-pointer">Forgot password?</p>        </div>    </div></body></html>

References

DaisyUI. (n.d.). A minimalists CSS framework. Retrieved March 31, 2023, from https://daisyui.com/

Gerchev, I. (2022). Tailwind CSS. SitePoint. ISBN 1098140990, 9781098140991.

OctAcademy. (2022, December 20). Tailwind CSS 3 Crash Course - Tailwind CSS for Beginners 2023 [Video]. YouTube. https://www.youtube.com/watch?v=6i9Xf5G5_x8

React Bootstrap. (n.d.). Introduction. Retrieved March 30, 2023, from https://react-bootstrap.github.io/getting-started/introduction/

Tailwind Labs. (n.d.). GitHub. Retrieved March 30, 2023, from https://github.com/tailwindlabs

Tailwind Labs. (n.d.). Headless UI. Retrieved March 30, 2023, from https://headlessui.com/

Tailwind Labs. (n.d.). Heroicons. Retrieved March 30, 2023, from https://heroicons.com/

Tailwind Labs. (n.d.). Tailwind CSS. Retrieved March 30, 2023, from https://tailwindcss.com/

Tailwind Labs. (n.d.). Tailwind CSS Documentation - Installation. Retrieved March 30, 2023, from https://tailwindcss.com/docs/installation

Tailwind Labs. (n.d.). Tailwind UI. Retrieved March 30, 2023, from https://tailwindui.com/

Wolstenholme, P. (2019, March 14). Companies Using Utility-First CSS in Production. Medium. https://philwolstenholme.medium.com/companies-using-utility-first-css-in-production-c9b9c2568046

Zreik, G. (2022, November 1). Why your friends cant shut up about TailwindCSS (and why they never will). Medium. https://medium.com/vivid-dev/why-your-friends-cant-shut-up-about-tailwindcss-and-why-they-never-will-d4a5d88326d8