uniapp中使用tailwindcss

介绍

那么我们先介绍一下什么时 TailwindCSS 是什么呢。
TailwindCSS 跟 CSS有什么差别呢，最大的差别就是在 TailwindCSS  中无需创建很多的 CSS 页面，都写在 元素的 class 属性中，因为  TailWindCSS棒我们已经写好了对应的CSS样式的库我们只需按照原子化的 属性来进行定义即可，你可能又有疑问了 这个是不是跟 Bootstrap 一样，其实差不多，但是 TailwindCSS 是定制度更高，就是你可以按照你自己的需要进行更改而不是写词一个组件让你使用，支持高度自定义。
TailWindCSS 现在也已经来到了 3.4.x 的版本了，已经迭代了很多次，算是很稳定了，现在很多公司都在使用中，我这边也是自从用上 TailWindCSS 后效率直接猛增，虽然很多厂商还没有完全投入使用 TailWindCSS，这边也是如果需要高度自定的部分的话还得使用 CSS 来实现。

提高效率神器之TailWindCSS

说来说去为师什么是高效是个不错的话题，用到这玩意儿就能提高开发效率？
很多人都会有这个疑问，我最初也是这样想，但是用了后发现哎别说你真别说，这效率提升的不是一般的快呀，现在我们使用的都是通过 Vue 或者 React 来开发，因为这两种给你开发都是使用组件化的方式开发的所以这个也会提升效率但是除了这个以外在 CSS 中编写50行代码 ， 可能在 TailWindCSS 中只不用用到那么多CSS😳，使用 TailWindCSS 中是写是有很多的定义来写的虽然缩短了行数但代码宽度很长了，下面就是一个简单看一下一个原子化的属性等于原CSS中的那些代码。
比如说是毛玻璃状态配置的 backdrop-blur 就是一个案例如果我们只是这么一些可能有些浏览器是不支持这个 backdrop-blur 所以我们还得配置每个内核不一样浏览器之间的体验也要考虑下面就是默认带出来的格式。

<div class="card backdrop-blur-md">
  <button type="button" @click="count++">count is {{ count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test HMR
  </p>
</div>

这个代码就是使用了 TailWindCSS的代码了，直接使用这个 这个 backdrop-blur-md class属性来配置了毛玻璃的效果，如果使用传统CSS来写的话得这么写。

.backdrop-blur-md {
    --tw-backdrop-blur: blur(12px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

这里就是适配浏览器，我们如果手写CSS的话要考虑到的内容这么多但是使用了 TailWindCSS 后就不需要考虑，我们只添加一个属性即可实现上面CSS样式中的内容，虽然说是没提升很多，但是你这么写下去一个页面的CSS样式可能有个8、9百行，这个工作量就是不听的写，但这个上面不一样直接在元素中定义当然可以在config 文件中添加自己自定义的内容即可实现高度自定义定制，可以使用白暗切换啥的，很快就实现，最大的差距可以看官方这个文档 在这里就是详细的讲了优势，当然有优势也有缺点，需要不停的学习，其实跟CSS一样，但官方可能也考虑到了这一点给编辑器提供了插件可以提示你正在写的原子化 VScode 插件 。
大家可以根据下面的图片就可以看到效果这里的 bg 是  background 的缩写然后 - 后就是选了个颜色，这个在css中写的就是 background-color:balck; 我的效率提升就是这里的提升。颜色可以在 config 文件设置好。

通过上面的案例你可能在想这不还是跟 Bootstrap 一样的想过嘛，但你看到下面的案例你就懂了，高度定制。
比如我们添加一个动画，直接在class属性中添加动画，下面是添加的代码截图，这里我就是添加了一些样式现在咱们看一下代码。

初学者可能对这些代码很陌生但是看一下也能很好的理解，现在我们看一下效果是怎么样的，下图演示效果，这里是因为 Gif 图片的原因（不是动画在卡）

uniapp上安装 tailwindcss

上面主要介绍了一下tailwindcss为什么是提高效率神器，现在给大家讲解 uniapp 中安装 tailwindcss 。首先我们通过 uniapp 的官方教程创建一个 uniapp 项目我在这里演示的只是 Vue3/Vite + uniapp 下面是对应的安装命令这里演示 TypeScript版本

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

如果安装失败，直接下载官方安装好的模板，在 gitee中开源，链接是 vue3/vite + typescript + uniapp
现在就是大家已经安装好了的状态了，咱们把下载下来的压缩文件 .zip 解压在我们放项目的目录中然后使用 HBuilderX 开发工具来打开目录的方式打开下载下来的项目，如果你使用上面的命令来安装的话那就是直接在那个目录里了。现在就是安装 TailWindCSS的部分在刚才的目录中打开 cmd 命令行，输入npm 命令即可安装，下面是对应的 npm 命令，点击这里直达安装教程

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

在 App.vue 文件的公共 CSS 部位添加添加这三行，引入 tailwindcss 库，注：style标签中的 scoped 需要删除，不然不是全局CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

安装好以后可以直接使用了，下面是安装的教程，演示一下。

还有就是因为tialwindcss使用的 rem 换成 rpx ,我看了一下好像不用换也是可以的。(tailwind.config.js)

presets: [
    require('tailwindcss-rem2px-preset').createPreset({
      // 32 意味着 1rem = 32rpx
      fontSize: 32,
      // 转化的单位,可以变成 px / rpx
      unit: 'rpx'
    })
],

开始使用

配置这些完成后可以在小程序模拟器上进行看到效果了，这里简单演示一下，字体变红。

这里大概就结尾了，uniapp + tailwindcss 的简单教程，个人讲解还是有缺陷，如果大家感兴趣可以去官方详细看看，下面是上面提到的关键词的官方文档：

• Vite/vue + uniapp
• Vite/vue + tailwindcss
• HBuilderX
  谢谢您阅读到这里，希望对你有帮助