前言：
最近两天搭建了自己的博客，然后一直在做优化，现在看起来，pc端已经勉强可以还阔以，但是完全没有做移动的兼容，想分享给朋友看，自己都嫌丑，于是开始看移动端的兼容。
目标：在一个项目内实现两端适配
看网上有的方案是，pc一套程序，移动端一套程序，两端来回跳，这种方式个人感觉不是好，而且项目体量小，开多个项目比较复杂。还有些其他方案大多是 pxtorem方案，也在我的项目上操作了，在同一个项目中也要写多套css，还有利用媒体查询来做的，都感觉不是很方便。
想到nuxt创建的项目demo，就是支持pc端和移动端的，看下它是如何适配的。说干就干，创建一个项目运行起来
pc页面
移动端页面
多么完美？感觉好香，赶紧查看它的源码：
看了一眼源码，发现了它的小秘密。嘿嘿，它的样式，都是这个东西
赶紧去看看这玩意儿https://tailwindcss.com/
看到官网，哇！好nice，赶紧查看文档：https://www.tailwindcss.cn/docs
哇！文档好全~~~
本来之前我css 就不是很好，感觉这个阔以帮到我完成布局和适配，好吧，开始撸~
安装依赖
本文采用yarn 方式安装：
yarn add -D @nuxtjs/tailwindcss tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9nuxt.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 学习（二）