Tailwind is a popular, highly customizable, low-level CSS framework for building modern designs for our websites.

Learning Tailwind

Scrimba runs a free Learn Tailwind course. We recommend that you go through this course to better understand how tailwind works.

Install Tailwindcss

Run the following from the root of your project:

1yarn add tailwindcss@1.9.6

Note that we are not using the latest version(>2.0.x) of tailwindcss since it has some issues with webpacker environment.

Next we need a directory where our stylesheets can reside. Run the following command to create that directory:

1mkdir -p ./app/javascript/stylesheets/

Now create the tailwind config file, which is the goto configuration file for anything related to colors, sizes, purging(which we will be covering in another chapter) etc for tailwind. You can read in depth about configuring tailwind over here. Now run the following command:

1npx tailwindcss init

Make sure you can see tailwind.config.js and postcss.config.js(comes with webpacker) files in the project root, before going further ahead.

Let's import some basic tailwind styles in our app/javascript/application.scss file, which will allow us to use a wide variety of tailwind utilities. Ultimately these imports will be replaced with its corresponding css on build process. Just run the following commands as is to set it up:

1touch ./app/javascript/stylesheets/application.scss # creates the file
2cat <<EOT >> ./app/javascript/stylesheets/application.scss
3@import "tailwindcss/base";
4@import "tailwindcss/components";
5@import "tailwindcss/utilities";

Currently we have an application.scss in which we have imported our tailwind styles. But in order to use it in our javascript views, lets import that file in our app/javascript/packs/application.js, by adding the following content to application.js in packs:

1import "../stylesheets/application.scss"

Unix magic for the lazy, to do the above job automatically (want to learn more? Just install man and type in man sed in your terminal):

1sed -n -i 'p;8a import \"../stylesheets/application.scss\"' app/javascript/packs/application.js

Now let's require our tailwind config and autoprefixer in our postcss.config.js which is in the root directory of the project. Run the following command to do that for you(note that this will overwrite the existing content of postcss.config.js):

1cat <<EOT > ./postcss.config.js
2module.exports = {
3  plugins: [
4    require("postcss-import"),
5    require("postcss-flexbugs-fixes"),
6    require("postcss-preset-env")({
7      autoprefixer: {
8        flexbox: "no-2009",
9      },
10      stage: 3,
11    }),
12    require("tailwindcss")("./tailwind.config.js"),
13    require("autoprefixer"),
14  ],

In simple terms postcss or post processing our CSS, takes our existing CSS and extends it, as opposed to preprocessors which use functions and variables to help write our CSS in a much more efficient, manageable way. Early Sass libraries provided mixins for handling vendor prefixes. However, vendor prefix standards and requirements will change over time, which means that libraries may get out of sync with standards. However, if we use autoprefixer, then we can just write our CSS as-is without thinking about vendor prefixes and just rely on autoprefixer to keep up with the standards for us.

We are now ready to use tailwindcss in our application.

Tailwind basics

Before we dive into the front-end side of the app, it's important to go through the basics of Tailwind and how to use it. In most of the places all we need to do is to use appropriate class names. A contrived example:

1<div className="h-screen bg-blue-900 text-black">
2    <p>
3        Hello World!
4    </p>

This sets the content's height to cover the screen and have a blue background of intensity 900 and foreground text color black! Simple right? Tailwind classnames come naturally once you start using it quite often.

You can use the following references to gain a better understanding of Tailwind:

Now let's commit these changes:

1git add -A
2git commit -m "Setup tailwindcss"