Up and running with BridgetownRB and Tailwind CSS

There are a few articles highlighting how to get going with the Ruby-powered static site generator BridgetownRb. While they may have worked initially when written, for whatever reason, they throw an asset compilation error due to the webpack configuration.

Below we'll install the needed Ruby gems and JavaScript packages necessary to get you designing out a simple static site with Bridgetown and TailwindCSS.

Step 1: Install the gems

$ gem install bundler bridgetown -N

Step 2: Create a project with Bridgetown

$ bridgetown new my-cool-static-project

Step 3: Install JavaScript packages

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

Step 4: Configure postcss.config.js file (put it in the root of your Bridgetown project)

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

Step 5: Update webpack.config.js file

Your webpack.config.js css configuration should read as follows (we just need to add postcss-loader after css-loader):

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

Step 6: Add TailwindCSS includes to your frontend/styles/index.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
// Your classes here
@import "tailwindcss/utilities";

Step 6: Run yarn

$ yarn start

You should be in business, continue your design and build out of your static site. Be sure to check the excellent documentation for Bridgetown.

Check out Andrew's guide for further deployment assistance.