Rails6_tailwindcss2_webpack

charlietag

Try to integrate tailwindcss2 into rails6

Download

Enviroment

Ruby

3.0.2

Rails

6.1.4.1

Webpacker requied by Rails 6

5.4.3

Postcss required by webpacker 5.4

Rails 6

Create rails project

rails new rails6_tailwindcss2_webpack -d mysql --skip-spring

Scaffold model `Book`

bin/rails g scaffold book name:string price:integer

Remove scaffolds.scss

cd app/assets/stylesheets
mv scaffolds.scss scaffolds.scss.bak

Create db and table

bin/rails db:create

bin/rails db:migrate

Run rails server

Running on local computer

bin/rails s

Running on remote server

bin/rails s -b 0.0.0.0

Reference

https://github.com/charlietag/rails6_tailwindcss2_webpack/compare/v0.0.0...v0.0.1

Tailwind CSS 2

Installing Tailwind CSS as a PostCSS plugin

PostCSS 7 compatibility build (Rails 6 does not support PostCSS 8 yet)

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Prepare for Tailwind CSS

Create folder to place cutom SCSS file, which is used to be compiled by webpack

cd app/javascript
mkdir stylesheets
cd stylesheets && touch application.scss

Setup Tailwind CSS

Create TailwindCSS configuration file

cd app/javascript/stylesheets
npx tailwindcss init

Setup tailwind.config.js

// --- Only works for production(NODE_ENV) or works for JIT mode ---
  purge: [
    "./app/**/*.html.erb",
    "./app/helpers/**/*.rb",
    "./app/javascript/**/*.js"
  ],
// --- Only works for production(NODE_ENV) or works for JIT mode ---

Setup PostCSS configuration <rails_app>/postcss.config.js

 module.exports = {
   plugins: [
     require('postcss-import'),
+    require('tailwindcss')('./app/javascript/stylesheets/tailwind.config.js'),
     require('postcss-flexbugs-fixes'),
     require('postcss-preset-env')({
       autoprefixer: {
         flexbox: 'no-2009'
       },
       stage: 3
     })
   ]
 }

Reference

https://github.com/charlietag/rails6_tailwindcss2_webpack/compare/v0.0.1...v0.0.2

Tailwind CSS 2 - Official plugins

Installing Tailwind CSS official plugins

yarn add @tailwindcss/typography @tailwindcss/forms @tailwindcss/line-clamp @tailwindcss/aspect-ratio

Setup Taiwind CSS official plugins

Edit app/javascript/stylesheets/tailwind.config.js

https://tailwindcss.com/docs/plugins#official-plugins

  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/aspect-ratio'),
  ]

Reference

https://github.com/charlietag/rails6_tailwindcss2_webpack/compare/v0.0.2...v0.0.3

Integrating Taiwind CSS 2 with Rails 6

Import SCSS file into webpack

Edit app/javascript/packs/application.js

  //...
  // append at the bottom
+ import "stylesheets/application"

Import Taiwind CSS

Edit app/javascript/stylesheets/application.scss

https://tailwindcss.com/docs/preflight

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Append header into html layout

Edit app/views/layouts/application.html.erb, to make sure SCSS, LESS, CSS configured under app/javascript/packs/application.js will be compiled by webpack

https://github.com/rails/webpacker#usage

        <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+       <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'  %>
      </head>