PostCSS

• PostCSS是一款使用JavaScript插件對(duì)CSS實(shí)現(xiàn)轉(zhuǎn)換的工具
• PostCSS擁有非常強(qiáng)大的插件昂勉，典型的比如autoprefixer淌哟、cssnext褐望、css modules等蝎毡。
• PostCSS插件的處理方式類(lèi)似CSS預(yù)處理器莱预，而非預(yù)處理器和后處理器丙猬。
• PostCSS并非優(yōu)化CSS的工具涨颜，語(yǔ)法也并非CSS的新式語(yǔ)法。

Vite自身已經(jīng)集成PostCSS茧球，無(wú)需再次安裝庭瑰。另外也無(wú)需單獨(dú)創(chuàng)建PostCSS配置文件，已集成到vite.config.js的css選項(xiàng)中抢埋〉穑可直接配置css.postcss選項(xiàng)即可督暂。Vite將自動(dòng)在*.vue文件中所有的style標(biāo)簽以及所有導(dǎo)入的.css文件中應(yīng)用PostCSS.

$ vim vite.config.js

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

import postcssImport from "postcss-import"
import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'


export default ({mode})=>{
  //生成自定義用戶(hù)配置
  return defineConfig({
    //樣式表插件
    css:{
      postcss:{
        plugins:[
          postcssImport,
          autoprefixer,
          tailwindcss
        ]
      }
    }
  })
}

PostCSS插件：嵌套CSS樣式寫(xiě)法解決方案

PostCSS插件：H5移動(dòng)端屏幕適用性解決方案

Import

PostCSS通過(guò)@import將樣式表合并到一起缠诅，當(dāng)需要通過(guò)@import將第三方類(lèi)庫(kù)導(dǎo)入到主樣式表時(shí)，首先需要運(yùn)行的是@import插件乍迄。

postcss-import

• 源代碼 https://github.com/postcss/postcss-import

安裝插件

$ npm ls postcss-import
$ npm info postcss-import
$ npm i -D postcss-import@latest

postcss-partial-import

• NPM包 https://www.npmjs.com/package/postcss-partial-import
• 源代碼 http://www.github.com/jonathantneal/postcss-partial-import
• 支持在CSS文件中使用Sugary @import語(yǔ)法褥伴，包括glob-like和Sass-like行為。
• 允許將導(dǎo)入作為腳手架工作來(lái)生成

Autoprefixer

• Autoprefixer是一個(gè)根據(jù)Can I Use解析CSS并為其添加瀏覽器廠商前綴的PostCSS插件
• Autoprefixer會(huì)使用基于當(dāng)前瀏覽器支持的特性和屬性為CSS添加前綴

查看項(xiàng)目下是否已經(jīng)安裝過(guò)Autoprefixer

$ npm ls autoprefixer version

使用NPM為Vue項(xiàng)目安裝Autoprefixer

$ npm info autoprefixer versions
$ npm i -D autoprefixer@latest

在PostCSS配置文件post.config.js配置文件的插件屬性中添加Autoprefixer

$ vim postcss.config.js

import autoprefixer from "autoprefixer"

export default {
  plugins:[
    autoprefixer
  ]
}

TaildwindCSS

官方網(wǎng)站：https://www.tailwindcss.cn/docs/plugins

• Tailwind CSS是一款實(shí)用為主效用優(yōu)先的CSS框架
• TailwindCSS作為PostCSS插件存在漾狼，將基礎(chǔ)的CSS拆分為原子級(jí)別重慢。
• PostCSS提供Autoprefixer插件用于補(bǔ)全各種瀏覽器前綴，兼容性更好邦投。

查看項(xiàng)目是否已經(jīng)安裝TailwindCSS

$ npm ls tailwindcss version

使用NPM安裝TailwindCSS

$ npm info tailwindcss versions
$ npm i -D tailwindcss@latest

為PostCSS配置TailwindCSS插件

$ vim postcss.config.js

import postcssImport from "postcss-import"
import autoprefixer from "autoprefixer"
import tailwindcss from "tailwindcss"

export default {
  plugins:[
    postcssImport,
    autoprefixer,
    tailwindcss
  ]
}

配置TailwindCSS獨(dú)立配置文件

$ vim tailwind.config.js

export default {
  
}

安裝VSCode插件

• Tailwind CSS IntelliSense
• Tailwind Docs

創(chuàng)建全局應(yīng)用的樣式表伤锚，注意必須引入postcss-import插件以支持@import寫(xiě)法。

$ vim src/assets/css/main.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

項(xiàng)目主入口文件中引入全局樣式表

$ vim src/main.js

import "@/assets/css/main.css"

安裝TailwindCSS插件

TailwindCSS提供了可復(fù)用的第三方插件用于擴(kuò)展Tailwind志衣，插件會(huì)注冊(cè)新的樣式屯援，讓Tailwind使用JavaScript代替CSS注入用戶(hù)的樣式表。

$ npm i -D @tailwindcss/forms
$ npm i -D @tailwindcss/typography
$ npm i -D tailwindcss/aspect-ratio