Search
⌘K
    to navigateEnterto select Escto close

    Adding Tailwind

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

    Learning Tailwind CSS

    At the bottom of the chapter we have added some references to learn Tailwind CSS. But to get an idea about the fundamentals, one can go through the official Tailwind CSS documentation, which explains the core concepts.

    From the perspective of the book, we 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.

    Installing 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/

    Next we need to create the tailwind config file, which is the main configuration file related to colors, sizes, purging. More info about the configuration is available over here. Now run the following command:

    1npx tailwindcss init

    First we need to ensure that we can see tailwind.config.js and postcss.config.js files in the project root, before going further ahead.

    Let's import some basic tailwind styles in the 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. 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";
    6EOT
    

    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.

    Add the following import statement after the require("channels"); line in app/javascript/packs/application.js:

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

    If you hadn't added it manually as mentioned above, then here's some Unix magic to do the above job automatically:

    1sed -n -i'.bak' -e 'p;8a\
    2import \"../stylesheets/application.scss\"' "app/javascript/packs/application.js"
    3rm -f "app/javascript/packs/application.js.bak"

    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  ],
    15};
    16EOT
    

    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>
    3</div>

    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"
    Previous
    Next