---
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

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

<!-- 加入下面三行 -->
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/app/javascript/styles 裡面再創一個 index.js

// 添加這行
import "./application.scss"

到 /app/javascript/packs/application.js

// 添加這行
import "styles"

到 /app/views/layouts/application.html.erb

// <header>更改stylesheet_tag為stylesheet_pack
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

根目錄下 postcss.config.js

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
    })
  ]
}