---
# System prepended metadata

title: tailwindCSS安裝
tags: [安裝套件 相關]

---

---
title:  tailwindCSS安裝
tags: 安裝套件 相關
---

## <font color=red>**tailwindCSS安裝** </font>
yarn add tailwindcss@latest postcss@latest autoprefixer@latest jquery@latest @popperjs/core
安裝完整功能

yarn tailwindcss init
1. 產生一個預設值的配置檔 tailwind.config.js 在你的專案根目錄
2. 創建一個資料夾/app/javascript/styles
3. 把根目錄下 tailwind.config.js 變成下面內容，啟動 jit mode
```htmlembedded=
module.exports = {
  mode: 'jit',
  purge: [
    './app/**/*.html',
    './app/helpers/**/*.rb',
    './app/views/**/*.html.erb',
    './public/**/*.html',
    './app/**/*.{js,jsx,ts,tsx,vue}',
  ],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require("tailwindcss"), 
    require("autoprefixer"),
  ]
}

```
/app/javascript/styles 裡面再創一個 application.scss 
```sass
<!-- 加入下面三行 -->
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```
/app/javascript/styles 裡面再創一個 index.js
```javascript=
// 添加這行
import "./application.scss"
```

到 /app/javascript/packs/application.js
```javascript=
// 添加這行
import "styles"
```

到 /app/views/layouts/application.html.erb
```htmlembedded=
// <header>更改stylesheet_tag為stylesheet_pack
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
```

根目錄下 postcss.config.js
```javascript=
module.exports = {
  plugins: [
    require("tailwindcss")("./tailwind.config.js"),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

```