# How to Use Tailwind with RedwoodJS

## **What is Tailwind?**

Do you ever hesitate to change your CSS because of it’s unintended side effects? Or have you gone to great lengths to switch up how to describe a button when you have three different styles to name? This has definitely happened to me. I personally like to be as organized and concise as possible with my CSS styling to prevent repeating myself or confusing someone else working on that same project.

This is a main reason I gravitate towards [Tailwind CSS](https://tailwindcss.com/) when starting a new project.  Well, what is Tailwind exactly? Tailwind is a utility-first CSS framework. This is just a fancy way of saying, “[easily understood, single function classes that help with common styling patterns](https://css-tricks.com/lets-define-exactly-atomic-css/#aa-utility-classes).”  Utility classes focus on elements like CSS properties themselves. For example, the Tailwind utility class `ml-0` sets `margin-left: 0px`. This simplified way of referencing classes speeds up the styling process. What else can Tailwind help? Well…

## **Why Use Tailwind?**

There are many reasons to use Tailwind. Utilizing Tailwind in your project can decrease your bundle size and make development a lot more intuitive.

### **Decreased Bundle Sizes**

More CSS declarations typically equate to large bundle sizes. An increase in bundle size can result in slowing your website rendering. Without strategically structuring your declarations and styling, your CSS file could get out of hand. Integrating Tailwind into your project gives you access to Tailwind’s complete library. From styling a button to creating a grid, you have access to it all. When you complete your project Tailwind removes any unused CSS, leaving your final CSS bundle as compact as possible. Of course, this depends on your project scale and customizations added, however [most Tailwind projects ship less than 10kB of CSS](https://tailwindcss.com/docs/optimizing-for-production). The hard work of optimizing for build and application speed is already done for you.

### **Intuitive Development**

Tailwind is versatile and simple to read when you work through the structure and reuse the basics. Since the utility classes touch the lowest parts of CSS possible, you can quickly design components that make sense to yourself and your team.

The great part of using Tailwind in a shared project is that class types become a shared language: everyone uses the same Tailwind classes to achieve their goals. Rather than adding obscure [BEM classes](https://getbem.com/naming/) like `container__headline--red` and forcing your team to look up all that’s involved with that class beyond a red text color, you can add every CSS property right in your HTML element. No more hunting around for CSS files! For example:

```markdown
<!-- text-red-600 is a red color -->

<!-- p-0 means 0 padding on all sides -->

<!-- my-4 means 16px margin on the top and bottom -->

<h1 className="text-red-600 p-0 my-4">Be glad for the Redwoods.</h1>
```

This keeps the shared code structured and cohesive. Changes are easily made and communicated through this shared knowledge that can expand from just one project.

## How to Integrate Tailwind into RedwoodJS

Speed and structure are two flagship benefits of using a framework like [RedwoodJS](https://redwoodjs.com/). RedwoodJS prides itself in “[beautifully weaving together the best parts](https://redwoodjs.com/)” of full stack development so you don’t have to (packages like React, Prisma, and GraphQL, to name a few).

For your next Redwood project, try integrating Tailwind and you’ll see for yourself how quick and simple your styling can be. To fully integrate Tailwind into pages, components, or scaffolding into the application I suggest installing Tailwind early on in the application process. To install and set up tailwind functions, there is a simple command to run inside your terminal.

```markdown
yarn rw setup ui tailwindcss
```

This tells Yarn to run Redwood and have it setup the TailwindCSS UI library.

After installing Tailwind, you will notice a few files have been created, including a `tailwind.config.js` file and a `postcss.config.js` file (those file extensions will depend on if you are using Typescript in your project). Your tailwind.config file can be used to customize and expand on the Tailwind library to specialize your project styling. You will also notice in your `index.css` file there have been a few lines added importing `tailwindcss/base`, `tailwindcss/components`, `tailwindcss/utilities`. In this file you can set up animations and apply changes for specific classes.

A great part of RedwoodJS is with any changes made in your API table after being migrated, you can run the scaffolds command to start building components and pages regarding your database table addition. The scaffolds command is basically setting up [CRUD](https://www.sumologic.com/glossary/crud/) elements.

The scaffold command is:

```markdown
yarn rw g scaffold User
```

The User portion would be substituted for your table name. This command will create web-side User pages and components, along with adding a new styling file.

In your new User components you will notice there is basic Tailwind styling, this is a RedwoodJS standard. Under `web/src` you will see a new file created named `scaffold.css`. This file is defining all scaffolding styling used. If you were to scaffold another table, this same styling will be applied. These styles can be helpful and great jumping off points for your project.

### **Tailwind is also compatible with…**

Although I’m biased and love working in RedwoodJS, Tailwind can be integrated in a variety of frameworks. Tailwind is compatible with [Next.js](https://nextjs.org/), [React](https://reactjs.org/), [Ruby on Rails](https://rubyonrails.org/), [Angular](https://angular.io/), and more.

To integrate Tailwind into your next application through another framework, you can follow Tailwind’s detailed [installation instructions.](https://tailwindcss.com/docs/installation/framework-guides) Regardless of how you install Tailwind, I highly recommend doing so as early in your project lifecycle as possible. This will make integration easier and standardize your styling.

## How to Customize Tailwind

Although Tailwind is expansive, there may be a few things you might want to add to your project.

### Ad Hoc Customizations

Within Tailwind, you’ll see how easy it is to customize your code. If you’d like to customize just one example of a class with a specific value, you’ll simply use square brackets to generate a property to use arbitrary values. It can look like this: `ml-[13rem]`. This method is not limited to rems, but can expand to pixels, hex colors, and more.

### Global Customizations

To make global changes to Tailwind, you will refer to the `tailwind.config` file. We can go with two routes: we  can either add on to Tailwind’s library of classes, or we can bypass the library by declaring our own classes completely on our terms.

You can make global changes inside the theme object in your config file. You have lots of options like specifying screen sizes, colors, and fonts. Definitely [check out Tailwind’s docs](https://tailwindcss.com/docs/theme#configuration-reference)
to see the full list.

Okay, enough talk! Let’s say we want to add onto the Tailwind library. Create an `extend` object inside the `theme` object and add your fancy styles.

Below we are adding colors to the Tailwind library. We are naming the new color and including the hex code value. Now this new color addition can be used throughout the application, being referenced by name.

```markdown
module.exports = {
theme: {
extend: {
color: {
burntOrange: '#AE6938',
seaFoamGreen: '#99CC99',
lilac: '#BEABEA',
brown: '#5E3C1D',
peach: '#EDAFA0',
}
}
}
}
```

To set the standard for a key, instead of extending from the Tailwind library, we will actually add our values inside the theme object itself (not within an `extend` object). Below we are identifying the screens, colors, and fontFamily to name the additions and set the corresponding values.

```markdown
module.exports = {
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
},
colors: {
'blue': '#1fb6ff',
'purple': '#7e5bef',
'pink': '#ff49db',
'orange': '#ff7849'
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
}
}
}
```

Your needs for using this file will depend on your project and requirements. The great thing is there are options for you throughout the development process that can be easily applied.

## **Finale**

In conclusion to this whole Tailwind rant, I hope we can agree it’s pretty awesome. For any size project, Tailwind will help speed up your styling process, keep your code cohesive, and has the room to customize in a variety of ways.

Tailwind is a simple styling library that any team could work through and operate. Its single-purpose utility class system benefits the styling process for each page and component. The speedy styling, decreased CSS bundle, and standardization for a team are all great reasons to start your next project with Tailwind. I can’t wait to see what you come up with!

‍

Photo by Ibrahim Rifath on Unsplash