Cuộc sống Nhật Bản
Yuto Blog

Ruby on Rails 6にTailwindCSSを導入(Gemを使わず)

Nội dung chính

Yarnで必要なものをインストールする

Copy
1
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
tailwind.config.jsファイルを生成する
Copy
1
yarn tailwindcss init app/javascript/packs/tailwind.config.js
Copy app/javascript/packs/tailwind.config.js
1
2
3
4
5
6
7
8
module.exports = {
  purge: [
    './app/**/*.html.erb',
    './app/**/*.html.slim',
    './app/helpers/**/*.rb',
    './app/javascript/packs/**/*.js',
  ],
  // 省略

postcss.config.jsファイルを編集する

Copy postcss.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  plugins: [
    require('tailwindcss')('./app/javascript/packs/tailwind.config.js'), // 追加
    require('autoprefixer'),                                             // 追加
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

TailwindCSSの必要なファイルをインポートする

Copy app/assets/stylesheets/application.scss
1
2
3
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Copy app/javascript/packs/application.js
1
import '../../assets/stylesheets/application.scss'

終わり

Updated at 2023-05-09
Nếu bài viết có ích thì các bạn hãy chia sẻ nhé
Rate this article: 5/5 (27 ratings)
You didn't rate yet
Le Minh Thien Toan

Tác giả:Yuto Yasunaga

Xin chào các bạn. Mình là kỹ sư IT đang làm việc ở Nhật Bản. Mình tạo blog này để chia sẻ về cuộc sống và những kinh nghiệm trong quá trình học tập và làm việc.
Hy vọng bài viết này sẽ có ích cho bạn.