一套代码搞定移动端pc端-tailwind 学习(一)

前言:
最近两天搭建了自己的博客,然后一直在做优化,现在看起来,pc端已经勉强可以还阔以,但是完全没有做移动的兼容,想分享给朋友看,自己都嫌丑,于是开始看移动端的兼容。

目标:在一个项目内实现两端适配

看网上有的方案是,pc一套程序,移动端一套程序,两端来回跳,这种方式个人感觉不是好,而且项目体量小,开多个项目比较复杂。还有些其他方案大多是 pxtorem方案,也在我的项目上操作了,在同一个项目中也要写多套css,还有利用媒体查询来做的,都感觉不是很方便。

想到nuxt创建的项目demo,就是支持pc端和移动端的,看下它是如何适配的。说干就干,创建一个项目运行起来
pc页面
一套代码搞定移动端pc端-tailwind 学习(一)_第1张图片
移动端页面
一套代码搞定移动端pc端-tailwind 学习(一)_第2张图片

多么完美?感觉好香,赶紧查看它的源码:
一套代码搞定移动端pc端-tailwind 学习(一)_第3张图片
看了一眼源码,发现了它的小秘密。嘿嘿,它的样式,都是这个东西
一套代码搞定移动端pc端-tailwind 学习(一)_第4张图片

赶紧去看看这玩意儿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 学习(一)_第5张图片
此时我们的安装就完成了,接下来就是学习如何使用了
一套代码搞定移动端pc端-tailwind 学习(二)

你可能感兴趣的:(一套代码搞定移动端pc端-tailwind 学习(一))