TailwindCSS Basics

These notes were taken while watching the Front End Masters course "Intermediate React, v4" by Brian Holt.

What is Tailwind and why use it?

With Tailwind, you write no CSS. Instead, you use small utility classes to style your app.

All of your CSS lives in your components and classes. This allows you to develop quickly.

Tailwind is popular in the industry right now, especially with React developers.

Installing and setting up Tailwind

Install with npm:
npm i -D tailwindcss@3.0.22 postcss@8.4.6 autoprefixer@10.4.2

Creating Tailwind configuration document:
npx tailwindcss init

Modifying configuration document:

module.exports = {
  mode: "jit",
  content: ["./src/*.{html,js}"],
  theme: {
    extend: {},
  },
  variant: (),
  plugins: [],
}

This is a basic starting config file

Setting up style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

This is how we include all the things we need from Tailwind. This is what allows Tailwind to bootstrap and only include the CSS you need to make your app run.

Basics and gradients

There's a VSCode extension called Tailwind CSS IntelliSense.

Make a new file in root directory:
.postcssrc

And then configure:

{
  "plugins": {
    "autoprefixer": {},
    "tailwindcss": {}
  }
}

Basics

// the div right inside <ThemeContext.Provider>
<div
  className="p-0 m-0"
  style={{
    background: "url(http://pets-images.dev-apis.com/pets/wallpaperA.jpg)",
  }}
>
  […]
</div>

The p-0 and m-0 is what Tailwind is a lot of: putting a lot of tiny utility classes on HTML elements. In this case: we're making it so the encapsulating div has zero padding and zero margin. If we wanted it to have a little of either, it'd m-1 or p-1. There's *-1 through 12 and then there it's more a random increase with 12, 14, 16, 20, 24, 28, 32, 36, 40, etc. all the way up to 96. There's also -m-1 for negative margins. There's also mt, ml, mr, mb for top, left, right, bottom and mx for left and right and my for top and bottom (these all apply to p as well.)

Gradients

<header className="w-full mb-10 text-center p-7 bg-gradient-to-b from-purple-400 via-pink-500 to-red-500">
  <Link className="text-6xl text-white hover:text-gray-200" to="/">
    Adopt Me!
  </Link>
</header>

Like p and m, we have w and h. w-1 would have a tiny width. w-full is width: 100%.
bg-gradient-to-b from-purple-400 via-pink-500 to-red-500 is a gradient just using classes. bg-gradient-to-b says it goes from the top to bottom (you can do -to-l, -to-r, or -to-t as well.) The from is the start. The via is a middle stop, and the to is the end.
The purple-400 is a purple color and the 400 is the lightness of it. 50 is nearly white, 900 is as dark as the color gets.
You can set your own colors via the theme but the default ones are really good.
text-6xl is a really big text size. They use the sizes sm, md, lg, xl, 2xl, etc. up to 9xl.
text-center will do text-align: center.
hover: is how we do hover, focus, disabled, etc. It takes whatever is on the right and only applies it only when that state is true. (note: disabled doesn't work without some magic in our PostCSS 7 compat layer. We'll do that in a bit.)
Note: from react-router-dom will pass styles and classes down to the resulting for you.

CSS Libraries

Emotion and Styled Components are better if you need your JavaScript to managing your CSS a lot (computation of color and hue and saturation computation and things like that). You can then use React to manipulate it.

You use bootstrap when you need something to look nice but you want to be quick about it.

Layout Basics

<div className="my-0 mx-auto w-11/12">
  <form
    className="p-10 mb-10 rounded-lg bg-gray-200 shadow-lg flex flex-col justify-center items-center"
    onSubmit={(e) => {
      e.preventDefault();
      requestPets();
    }}
  >
    […]
  </form>
</div>

rounded-lg is a "large" rounding of the corners i.e. border-radius.
shadow-lg is a "large" border shadow.
flex makes the display mode flex. flex-col makes it columns. justify-center makes it justify-content center. items-center makes it align-items: center. Net result is that you have centered horizontally and vertically items in a vertical direction.

Tailwind Plugins

Run npm install -D @tailwindcss/forms@0.4.0.

Put this into your tailwind.config.js

// replace plugins
plugins: [require("@tailwindcss/forms")],

This will apply a bunch of default styles for all of our basic form elements. Tailwind has a pretty great plugin ecosystem. One of my favorites is the aspect-ratio one. CSS doesn't currently have a backwards compatible way of doing aspect ratios (e.g. keep this image in a square ratio) and this plugin makes a primitive that you can use like that.

With this plugin they (probably wisely) require you to add type="text" to the the input so they can have a good selector for it.

Let's finish making SearchParams looks nice.

To each of the selects and inputs, add className="w-60 mb-5 block" so they have a nice uniform look.

To the breed selector, we want it to be grayed out when it's not available to use.

Now add className="w-60 mb-5 block disabled:opacity-50" to the breed .

Replace the button with:

<button
  className="rounded px-6 py-2 color text-white hover:opacity-50 border-none"
  style={{ backgroundColor: theme }}
>
  Submit
</button>

Grid & Breakpoints

// replace outermost div
<div className="grid gap-4 grid-cols-2">[…]</div>

grid puts you into display: grid.
gap-4 gives you the gutters between with the number representing how big.
grid-cols-2 says how many you want per row.

Making it responsive
<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">[…]</div>

The sm: is the small breakpoint which is larger than 640px apply this style (these can be adjusted and renamed)
The lg: is the large breakpoint is larger than 1024px. There's also md, xl, and 2xl too.

Positioning

<Link to={`/details/${id}`} className="relative block">
  <div>
    <img src={hero} alt={name} />
  </div>
  <div className="absolute bottom-0 left-0 bg-gradient-to-tr from-white to-transparent pr-2 pt-2">
    <h1>{name}</h1>
    <h2>{`${animal} — ${breed} — ${location}`}</h2>
  </div>
</Link>

We need to set the containing anchor link as both display block and relative positioning so we can reposition inside of it.
The absolute will make the name tag be absolutely positioned within the relatively positioned parent anchor link.
bottom-0 and left-0 will put our little name tag in the bottom left of the div.
The bg-gradient-to-tr from-white to-transparent gives us a fun little white-to-transparent gradient so it makes it easier to read the name tag.
pr-2 pt-2 is a little right and top padding to extend the gradient.