在Rails6中安装TailwindCSS

这篇文章将告诉大家怎样快速的在Rails6中安装使用tailwindCSS。那么让我们开始吧!

安装tailwindCSS

输入下面的命令进行安装

1
2
3
4
5
# 通过 npm
npm install tailwindcss

# 通过 Yarn
yarn add tailwindcss

生成文件

app/javascript文件夹中创建css文件夹,并在其中新建application.scss文件。

1
2
3
mkdir app/javascript/css

touch app/javascript/css/application.scss

将下面的代码填写到application.scss文件中。

1
2
3
4
5
@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

配置文件

app/javascript/packs/application.js文件中加入下面的代码:

1
require("css/application.scss")

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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中加入如下代码

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

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