This content originally appeared on DEV Community and was authored by David Morales
I’m going to show you how to create a project with Rails 6.1 and its default Webpacker version (4.5), and configure Tailwind CSS with its dependencies and JIT mode enabled.
You’ll end up with a project that compiles the final CSS automatically, and refreshes the browser for you as well, after every change.
Create a Rails application:
rails new tailwind-jit-rails
Install the Tailwind CSS dependencies. Open the terminal and run:
yarn add @fullhuman/postcss-purgecss@^4 postcss@^8 postcss-loader@^4 autoprefixer@^10 tailwindcss@^2
Create the file app/javascript/stylesheets/application.scss (you will have to create the stylesheets directory).
Now open application.scss and add the Tailwind CSS directives:
@tailwind base;
@tailwind components;
@tailwind utilities;
Remember that this is an SCSS file, so you can add here the SCSS code you need later.
Open app/javascript/packs/application.js and add this import to include the new application.scss:
import "stylesheets/application.scss"
Put that line below the last import (channels).
Open postcss.config.js and add this require at the beginning of the plugins array, just before the first require:
require('tailwindcss')
Open app/views/layouts/application.html.erb and add this before stylesheet_link_tag:
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
So it will look like this:
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
Now you can create the Tailwind CSS configuration file in the terminal:
npx tailwindcss init
Enable JIT mode and configure the purge option so that it looks like this:
mode: 'jit',
purge: [
'./app/views/**/*.html.erb',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
],
To prevent Webpacker from generating a rather annoying warning message, open babel.config.js and add this at the bottom, just before the closing ].filter(Boolean):
['@babel/plugin-proposal-private-methods', { loose: true }],
['@babel/plugin-proposal-private-property-in-object', { loose: true }]
Remember to add a comma to the previous element. It will look like this:
[
'@babel/plugin-transform-regenerator',
{
async: false
}
],
['@babel/plugin-proposal-private-methods', { loose: true }],
['@babel/plugin-proposal-private-property-in-object', { loose: true }]
Finally, to get Webpacker 5 to work with PostCSS 8 we need to add a small hack. Open config/webpack/environment.js and add this before module.exports = environment:
// https://github.com/rails/webpacker/issues/2784#issuecomment-737003955
function hotfixPostcssLoaderConfig (subloader) {
const subloaderName = subloader.loader
if (subloaderName === 'postcss-loader') {
if (subloader.options.postcssOptions) {
console.log(
'\x1b[31m%s\x1b[0m',
'Remove postcssOptions workaround in config/webpack/environment.js'
)
} else {
subloader.options.postcssOptions = subloader.options.config;
delete subloader.options.config;
}
}
}
environment.loaders.keys().forEach(loaderName => {
const loader = environment.loaders.get(loaderName);
loader.use.forEach(hotfixPostcssLoaderConfig);
});
That’s it!
If you want to test if it works, create a test controller:
rails g controller Home index
Add the root in config/routes.rb:
root 'home#index'
Open app/views/home/index.html.erb and create an H1 like this:
<h1 class="font-bold text-4xl text-center text-red-500">Hello World!</h1>
Now open the Webpacker server in a terminal tab:
bin/webpack-dev-server
And the Rails server in another tab:
bin/rails s
Open your browser and load localhost:3000
You should see a big, red Hello World!
Try making changes, and you’ll see how fast it compiles and refreshes the browser.
As an additional note, for the Tailwind CSS IntelliSense extension to work in html.erb files you must open the preferences and look for the files.associations option. Click the Add Item button and add *.html.erb as item, and html as value.
Enjoy!
This content originally appeared on DEV Community and was authored by David Morales
David Morales | Sciencx (2021-08-05T15:39:14+00:00) Setting Up Rails 6.1 + Tailwind CSS 2.2 with JIT. Retrieved from https://www.scien.cx/2021/08/05/setting-up-rails-6-1-tailwind-css-2-2-with-jit/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.