前言：这两天搭建了自己的博客，然后一直在优化中。现在看来pc端勉强可以回本了，但是根本不在做移动端兼容，想分享给小伙伴们，但是又觉得丑，于是开始关注移动端兼容。目标：在一个项目中实现两端适配。网上有的解决方案是，PC一套，手机一套，两端来回跳转。项目比较复杂。还有一些其他的解决方案，大部分是pxtorem的解决方案，也在我的项目上运行。同一个项目写多套css，用mediaquery来做，不是很方便。想想nuxt创建的项目demo，它同时支持PC端和移动端。让我们看看它是如何适应的。直接去做，创建一个项目并运行它。PC页面和手机页面到底有多完美？太香了，赶紧查看了它的源码：看了一眼源码，发现了它的小秘密。嘿，它的风格就是关于这件事的。赶紧来看看这个东西https://tailwindcss.com/看看官网，哇！不错，赶紧查看文档：https://www.tailwindcss.cn/docs哇！文档太齐全了~~~之前css不是很好，感觉这足以帮我完成排版和适配。好了，开始吧~安装依赖本文的yarn安装：yarnadd-D@nuxtjs/tailwindcsstailwindcss@npm:@tailwindcss/postcss7-compat@tailwindcss/postcss7-compatpostcss@^7autoprefixer@^9nuxt.config.js在文件中添加模块//nuxt.config.jsexportdefault{buildModules:['@nuxtjs/tailwindcss']}在项目的根目录下创建一个配置文件。npxtailwindcssinit生成的默认文件。配置参数了解配置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,//或'media'或'class'theme:{extend:{},},variants:{extend:{},},plugins:[],}在根目录下新建文件./assets/css/tailwind.css，内容如下/*./assets/css/tailwind.css*/@tailwindbase;@tailwindcomponents;@tailwindutilities;这时候运行yarndev，就可以使用tailwind了，tailwind也很贴心的准备了一个样式预览页面至此我们的安装就完成了，接下来就是学习如何使用一组代码获取移动端PC端-顺风学习（2）
