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

Learning Tailwind CSS

At the bottom of the chapter we have added some references from where you can master Tailwind CSS.

But to get an idea about the fundamentals, you can go through the official Tailwind CSS documentation, which explains the core concepts.

From the perspective of the book, you only need to grasp the basics of Tailwind CSS.

The code we have shown pertaining to Tailwind CSS, within the book, can be directly copy-pasted, and it will work.

Install Tailwind CSS

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/stylesheets/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, let's 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 to do the above job automatically.

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. 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 frontend 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.

1<div className="h-screen bg-blue-900 text-black">
2  <p>Hello World!</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 more 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"
    to navigateEnterto select Escto close