一套代碼搞定移動端pc端-tailwind 學習（一）

原文個人博客:一套代碼搞定移動端pc端-tailwind 學習（一）支持原文吧！😋

前言： 最近兩天搭建了本身的博客，而後一直在作優化，如今看起來，pc端已經勉強能夠還闊以，可是徹底沒有作移動的兼容，想分享給朋友看，本身都嫌醜，因而開始看移動端的兼容。

目標：在一個項目內實現兩端適配

看網上有的方案是，pc一套程序，移動端一套程序，兩端來回跳，這種方式我的感受不是好，並且項目體量小，開多個項目比較複雜。還有些其餘方案大可能是 pxtorem方案，也在個人項目上操做了，在同一個項目中也要寫多套css，還有利用媒體查詢來作的，都感受不是很方便。

想到nuxt建立的項目demo，就是支持pc端和移動端的，看下它是如何適配的。說幹就幹，建立一個項目運行起來 pc頁面 移動端頁面

多麼完美？感受好香，趕忙查看它的源碼： 看了一眼源碼，發現了它的小祕密。嘿嘿，它的樣式，都是這個東西

趕忙去看看這玩意兒tailwindcss.com/

看到官網，哇！好nice，趕忙查看文檔：www.tailwindcss.cn/docs

哇！文檔好全~~~

原本以前我css 就不是很好，感受這個闊以幫到我完成佈局和適配，好吧，開始擼~

安裝依賴

本文采用yarn 方式安裝：

yarn add -D @nuxtjs/tailwindcss tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
複製代碼

nuxt.config.js 文件中添加模塊

// nuxt.config.js
export default {
  buildModules: ['@nuxtjs/tailwindcss']
}
複製代碼

項目根目錄下建立配置文件

npx tailwindcss init
複製代碼

生成的默認文件，配置參數瞭解 配置

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
複製代碼

tailwind 因爲寫了不少樣式，因此包很大，但可能咱們沒有使用到，因此在正式發佈的時候須要優化，修改配置文件

module.exports = {
  purge: [
    './components/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
複製代碼

根目錄下新建文件./assets/css/tailwind.css,內容以下

/* ./assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
複製代碼

此時運行 yarn dev ，就可使用tailwind了， tailwind 還很貼心的準備了一個樣式預覽的頁面

此時咱們的安裝就完成了，接下來就是學習如何使用了 一套代碼搞定移動端pc端-tailwind 學習（二）