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!
Top comments (0)