一套代码搞定移动端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 学习（二）