在 Rails6 中安裝 TailwindCSS

這篇文章將告訴大家怎樣快速的在Rails6中安裝使用tailwindCSS。那麼讓我們開始吧！

安裝tailwindCSS

輸入下面的命令進行安裝

# 通過 npm
npm install tailwindcss

# 通過 Yarn
yarn add tailwindcss

生成檔案

在app/javascript資料夾中建立css資料夾，並在其中新建application.scss檔案。

mkdir app/javascript/css

touch app/javascript/css/application.scss

將下面的程式碼填寫到application.scss檔案中。

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

配置檔案

在app/javascript/packs/application.js檔案中加入下面的程式碼:

require("css/application.scss")

在postcss.config.js中更改配置如下

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('tailwindcss'), // 新加入的程式碼
    require('autoprefixer'), // 新加入的程式碼
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

在app/views/layouts/application.html.erb中加入如下程式碼

<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

至此安裝完畢。接下來就可以在專案中進行使用啦！

本作品採用《CC 協議》，轉載必須註明作者和本文連結