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