在 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 协议》，转载必须注明作者和本文链接