Tailwind CSS v2 with BridgetownRB

Dean — Fri, 01 Jan 2021 16:00:54 +0000

This post was originally published on my blog.

Today I've been playing around with BridgetownRB as a static site generator.
I've also recently been playing around with the new version of Tailwind CSS
and I wanted to update this site design to use it. Here's a quick tutorial on setting it up with BridgetownRB.

1. Install Tailwind with Yarn

yarn add -D postcss autoprefixer postcss-import postcss-loader tailwindcss

2. Create Tailwind config file

Run npx tailwindcss init to create tailwind.config.js file.

3. Create a postcss.config.js file

module.exports = {
  plugins: [
    require("postcss-import", {
      path: "frontend/styles",
      plugins: [],
    }),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

4. Update your webpack.config.js file

Scroll down to where you see MiniCssExtractPlugin.loader (around line 60) and change this:

{
  test: /\.(s[ac]|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "sass-loader",
      options: {
        sassOptions: {
          includePaths: [
            path.resolve(__dirname, "src/_components")
          ],
        },
      },
    },
  ],
},

to this

{
  test: /\.(s[ac]|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "sass-loader",
      options: {
        sassOptions: {
          includePaths: [
            path.resolve(__dirname, "src/_components")
          ],
        },
      },
    },
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          ident: "postcss",
          plugins: [
            require("postcss-import"),
            require("tailwindcss"),
            require("autoprefixer"),
          ],
        }
      },
    },
  ],
},

5. Add Tailwind to your CSS

Add the following to frontend/styles/index.scss.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

6. Remove unused CSS

The great thing about Tailwind is that it uses PostCSS to remove any unused CSS which reduces the size
of the final CSS file. Edit your tailwind.config.js file so it looks like this:

module.exports = {
  purge: {
    enabled: process.env.NODE_ENV == "production",
    content: ['./src/**/*.{html,md,liquid}']
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Now when you build/deploy your site, you'll need to use the NODE_ENV environment
variable. For example:

NODE_ENV=production yarn deploy

Success! You should now have a working BridgetownRB site with Tailwind v2!