在 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' %>

至此安装完毕。接下来就可以在项目中进行使用啦!

There's nothing wrong with having a little fun.

Epona
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!