DEV Community

Cover image for Webpacker 6: Tailwind CSS 2.0 Integration
Andrew Mason
Andrew Mason

Posted on • Updated on • Originally published at andrewm.codes

Webpacker 6: Tailwind CSS 2.0 Integration

#rails #webpacker #tailwindcss #tutorial

In order to add Tailwind CSS 2.0 to your Rails 6 + Webpacker 6 application, you need PostCSS set up, plus a few additional steps.

Tailwind CSS has detailed documentation on preprocessor usage so refer to that for further setup.

Note: This section builds on the PostCSS section

Install 

yarn add tailwindcss
Enter fullscreen mode Exit fullscreen mode

Add Tailwind CSS Config File 

yarn tailwind init
Enter fullscreen mode Exit fullscreen mode

Update PostCSS Config 

// postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import'),
+   require('tailwindcss'),
    require('autoprefixer')
  ]
}
Enter fullscreen mode Exit fullscreen mode

Usage

You should be able to use the same pack tag that you added for CSS.

Make sure you restart bin/webpack-dev-server after installing new loaders.

Style Loader Example 

<%# app/views/layouts/application.html.erb %>

+ <%= stylesheet_packs_with_chunks_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_packs_with_chunks_tag 'application', 'data-turbolinks-track': 'reload' %>
Enter fullscreen mode Exit fullscreen mode

Extract Example 

<%# app/views/layouts/application.html.erb %>

<%= javascript_packs_with_chunks_tag 'application', 'data-turbolinks-track': 'reload' %>
+ <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Enter fullscreen mode Exit fullscreen mode 
// app/javascript/packs/application.js

+ import "./application.css"
Enter fullscreen mode Exit fullscreen mode

Verify

Note: Make sure you restart the dev server!

Let’s create a new PostCSS file:

touch app/javascript/stylesheets/base.css
echo "@import 'tailwindcss/base';" >> app/javascript/stylesheets/base.css
touch app/javascript/stylesheets/utilities.css
echo "@import 'tailwindcss/utilities';" >> app/javascript/stylesheets/utilities.css
touch app/javascript/stylesheets/components.css
echo "@import 'tailwindcss/components';" >> app/javascript/stylesheets/components.css
Enter fullscreen mode Exit fullscreen mode

Next, add some CSS:

/* app/javascript/stylesheets/base.css */

@import "tailwindcss/base";

+ h1 {
+   font-size: 2.2em;
+   color: #2563eb;
+ }
+
+ p {
+   font-size: 1.2em;
+ }
Enter fullscreen mode Exit fullscreen mode

Lastly, update application.css:

/* app/javascript/packs/application.css */

@import "../stylesheets/base.css";
@import "../stylesheets/components.css";
@import "../stylesheets/utilities.css";
Enter fullscreen mode Exit fullscreen mode

Reload your browser and your styles should be applied now with Tailwind CSS, and the Webpacker loader error should be gone.

Top comments (1)

Collapse
 
juanvqz profile image
Juan Vasquez • • Edited

do we need sass and sass-loader when using tailwind css? (because it was added in a previous post).

EDIT:
I tried to push this config in Heroku and it returns an error when compiling assets.

   warn - Tailwind is not purging unused styles because no template paths have been provided.
       warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning.
       warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css

 !
 !     Precompiling assets failed.
 !
 !     Push rejected, failed to compile Ruby app.
 !     Push failed
Enter fullscreen mode Exit fullscreen mode

I found the solution here

rails webpacker:install updates my yarn.lock

Read next

moh_moh701 profile image

Mastering C# Fundamentals: Encapsulation

mohamed Tayel -

mike_andreuzza profile image

How to create a button component with variants and icons with Astro JS and Tailwind CSS

Michael Andreuzza -

damilolaolatunji profile image

What's New in Ruby on Rails 8

Damilola Olatunji -

furkangozukara profile image

How to Set Up Python, CUDA, cuDNN, C++ Build Tools, FFMPEG & Git for AI Applications

Furkan Gözükara -