DEV Community

Dean
Dean

Posted on • Originally published at deanpcmad.com

Tailwind CSS v2 with BridgetownRB

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
Enter fullscreen mode Exit fullscreen mode

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"),
  ],
};
Enter fullscreen mode Exit fullscreen mode

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")
          ],
        },
      },
    },
  ],
},
Enter fullscreen mode Exit fullscreen mode

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"),
          ],
        }
      },
    },
  ],
},
Enter fullscreen mode Exit fullscreen mode

5. Add Tailwind to your CSS

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

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

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

NODE_ENV=production yarn deploy
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)