Tailwind CSS

go.raybo.org/3JZh

Tailwind CSS is a framework for building great looking sites with a utility first approach that is super popular for libraries like React. Let's take a look at how you go about installing it.

Installing Tailwind CSS 

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 @tailwindcss/forms

A new version of Tailwind CSS just released as of this video, so the instructions might be different for you. Just make sure you check out this page from our slides or the microsite.

Tailwind is a PostCSS plugin, so in addition to tailwind, we'll need postcss installed. Since we're going to be using forms, we'll need the tailwinds form plugin as well.

Using Craco 

npm install @craco/craco

"start": "craco start",
"build": "craco build",
"test": "craco test",

Because the current version of the Create React App doesn't yet support PostCSS8, we have to do one more installation, using a utility called Craco. (Create React App Configuration Override), then we'll modify the scripts in our package.json to use that.

craco.config.js 

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

Craco also needs a small configuration file so that it knos about tailwind, so let's add that next.

Setting Tailwind Config 

npx tailwindcss init

purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
...
plugins: [ require('@tailwindcss/forms')]

Tailwind also requires a configuration file which you can get running the npx tailwindcss init command.

Tailwind will install all of the styles, even if we don't use them. Thankfully, we can use a plugin called purgeCSS to get rid of what we don't need. We'll need to make one change to the generated config file, so that it takes care of this.

Alo, because we're using forms with tailwind, we need to add that to the config file under plugins.

Modifying our CSS 

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

Now we can use Tailwind CSS just like we would normally do. So, I'm adding the three main parts of tailwind, the base, components and utility sections. You can fully customize tailwinds and create your own classes here, so if you want to learn more about it, do a search in the library for tailwind.

Modifying JSX

To finish up the Tailwind installation, we need to replace the code in our index.css file so that it uses the different pieces of Tailwind CSS.

<div className="App container
  mx-auto mt-3 font-thin">
  <h1 className="text-5xl">
  <BiArchive className="inline-block
    text-red-400 align-top" /> Your Repos</h1>
</div>