前言:
最近两天搭建了自己的博客,然后一直在做优化,现在看起来,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@^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 学习(二)