Setting up Tailwind 2.0 with Rails 6
How to get started on the bleeding edge of CSS and App Development
TailwindCSS 2.0 was just announced less than 24 hours ago. As someone who loves the bleeding edge, and someone who’s wanted to get on the Tailwind train for a while now, I thought this would be the perfect moment to check it out.
Disclaimer: This post is about connecting the latest stable versions of Rails and Tailwind. Use these steps if you’d like to start using Tailwind 2 *right now*. There’s a chance this post will be useless in 6 months though.
Here are the steps I had to go through to get Tailwind 2.0 to play nice with Webpacker in Rails 6.
Step 1: Install Tailwind 2.0
First things first, let’s get Tailwind installed in your codebase. On your terminal of choice, type the following command:
$ yarn add tailwindcss
Step 2: Create a Tailwind config file
Next step is to create a Tailwind config file.
$ touch tailwind.config.js
Now open your favorite text editor and paste the following snippet:
module.exports = {
theme: {
extend: {
colors: {
primary: {},
},
},
},
purge: {
content: ["./app/**/*.html.erb"],
}
}
And then update your `postcss.config.js` file with the following:
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require("tailwindcss"),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
Feel free to configure tailwind any way you’d like after this step.
Step 3: Update your application.css file
You now need to upgrade your `application.css` file to make sure we’re importing Tailwind and making it available in your UI.
Add the following lines to your application.css file:
/* tailwind */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Next, we’ll update our `application.js` pack to make sure we’re importing Tailwind into our JavaScript bundle:
import "../../assets/stylesheets/application.css"
And finally, we’ll now include a new style pack import link to our `application.html.erb` layout file.
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Things should be good at this point, but this is where I hit a snag. It turns out that Tailwind 2.0 requires PostCSS 8, which as of today, doesn’t play nice with Webpacker 4.
It took me a bit of head scratching to get this step right. But after following a few stack traces and StackOverflow posts, here’s all you need to do in order to get Taildwind 2.0 and Rails 6 to play nice together:
Step 4: Fixing webpacker config
There’s a good chance Steps 1 through 3 is all you need, but in case you ran into any trouble so far, this is what you’ll need to do in order to get Tailwind and PostCSS to load correctly:
a) Install `postcss@8` and `postcss-loader@4`
yarn add --dev postcss@8.0.0 postcss-loader@4.1.0
b) Update your webpack config
Webpacker currently ships with specific configuration that prevents PostCSS8 and PostCSS-Loader to work correctly.
You can get around that with a small snippet of code that will delete the invalid configuration and allow for compilation to proceed.
Update your `config/webpack/environment.js` with the following snippet:
const { environment } = require('@rails/webpacker')
const css = environment.loaders.get('css')
const sass = environment.loaders.get('sass')
const postCssConfig = css.use.find(u => u.loader === 'postcss-loader')
const postSassConfig = sass.use.find(u => u.loader === 'postcss-loader')
if (postCssConfig) {
delete postCssConfig.options.config
}
if (postSassConfig) {
delete postCssConfig.options.config
}
module.exports = environment
And that’s it :)
You should now be able to use the latest and greatest of Tailwind 2.0 and Rails 6.
Now go ahead and build something great!
Follow me on twitter @nettofarah if you’d like to hear more about my journey building cool stuff and helping my friends earn more as software engineers.
Setting up Tailwind 2.0 with Rails 6
Hi Netto, thanks for the step-by-step guide. I followed it step-by-step with a new Rails 6.0.3.4 app, then created a simple index controller and directly pasted the code sample from one of the TailwindUI examples for tables ( https://tailwindui.com/components/application-ui/lists/tables ). Unfortunately none of the Tailwind classes in that code snippet were rendered.