vite整合tailwindcss

Java小卷
1,450 阅读4分钟

各位掘金的小伙伴们，大家好！在开始Vue3组件实战之前咱们一起完成最后一项大的基础功能整合——tailwindcss样式工具整合。相比于传统的预编译样式文件生成工具，tailwindcss主要采用原子的语义化class定义来实现样式的复用，省去了自己手写实现各种样式效果的烦恼，这种重用程度和编译效率都要更高，它将慢慢成为快速构建前后台网站样式的事实上的标准。接下来我们将在上一小节vite集成eslint、prettier的基础上完成tailwindcss的集成。

安装依赖

在目前工程的基础上新安装的依赖如下：

npm i -D autoprefixer@10.4.19 postcss@8.4.38 prettier-plugin-tailwindcss@0.5.14 tailwindcss@3.4.3

关于依赖的说明：

  • tailwindcss 用来编译tailwind原子样式
  • postcss tailwindcss默认的CSS处理工具
  • autoprefixer 处理浏览器的前缀样式，以实现样式的统一
  • prettier-plugin-tailwindcss 对tailwindcss样式进行检查和排序的格式化等操作

配置

postcss配置

在项目根目录下创建一个postcss.config.js文件，在其中配置相关插件以完成各自css处理的任务：

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

tailwindcss配置文件

在项目根目录下创建一个tailwind.config.js文件，它是tailwindcss的基础配置文件，目前我们只关注在其中配置项目中哪些文件需要应用tailwindcss工具来编译生成目标的css：

/** @type {import('tailwindcss').Config} */
export default {
  // 要应用tailwind样式的各个文件
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
}

这里，我们对content配置项加了一个单页面的index.html以及src目录下指定后缀的文件。而对于其他的配置项，随着后续深入组件实战的进行，必要时我们再进行相关的配置。

vite配置

需要在vite.config.js中增加postcss相关插件的配置，这里我们引入和注册插件，使用插件默认的设置即可，注意引入的tailwindcss本身就是一个插件类型，调整的配置如下：

...
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
​
...
export default defineConfig({
  ...,
  css: {
   postcss: {
    plugins: [tailwindcss, autoprefixer()]
   }
  }
})

prettier格式化插件

为了确保html元素class中声明的tailwindcss的样式没有冲突，以及更好的维护定义的顺序，可以使用prettier-plugin-tailwindcss插件来规范咱们对tailwindcss样式的声明，比如class中指定的值在编译后样式产生了冲突，支持prettier插件的编辑器会有飘红提示；咱们定义的class值是不用管顺序的，在按Ctrl + S保存代码时，会由prettier插件自动帮我们调整定义顺序，以确保风格一致。 在.prettierrc.cjs文件的plugins数组配置项中加入插件即可，调整如下：

module.exports = {
    ...
    plugins: [
        "prettier-plugin-tailwindcss"
    ]
}

导入tailwindcss指令

为了让tailwindcss编译器能找到编译的模板，需要在应用的全局样式入口中声明tailwindcss各部分的指令，具体做法是，在咱们应用中全局引入的src/style.css中进行指令的引入：

/* 导入tailwind指令 */
@tailwind base;
@tailwind components;
@tailwind utilities;

预编译css框架还能继续用吗 有了tailwindcss后，基本上咱们不需要再自己写css样式文件了，我们可以对tailwindcss中预定义的各种样式进行组合使用，必要时我们可以继承和扩展其定义以满足我们对样式可维护性和可复用性的需要。某些情况下，我们还可以继续使用诸如sass这样的预编译css工具，比如写scss的变量声明、引入使用以及特定指令的css模板语法，但在某些语法的作用下会与tailwindcss的指令使用方式产生冲突，引起一些副作用，具体可以参考官方Using Sass, Less, or Stylus小节哦~

应用示例

完成了前面的各部分设置，是时候在我们的组件中应用tailwindcss样式了。找到咱们之前定义的HelloWorld组件，为渲染的msg内容应用样式修饰，定义如下： src/components/HelloWorld.tsx

...
export default defineComponent({
  ...
  setup(props: Props) {
    ...
    return () => {
      return (
        <div>
          <h1 class='text-3xl text-red-500 underline'>{msg.info}</h1>
          ...
        </div>
      )
    }
  }
})

看到页面的效果，显然tailwindcss样式被成功应用了！

image.png

关于编辑器对tailwindcss的插件支持

基本上现在几大前端开发神器都有相应的tailwindcss插件来友好的支持原子性样式的应用，比如拿小卷钟爱的idea来说，已经内置了tailwindcss插件，光标移上去，会展示编译后的css样式，但是没有vscode人性化的地方是，在编辑样式时并没有编译结果的实时展示。另外还可以检查冲突的样式，以及对定义顺序进行格式化。

tailwindcss编辑效果.gif

ok，本小节的内容到此为止，学到这里我们的Vue3组件开发的环境准备就基本ok了！接下来小卷会更新Vue3组件实战的第一个组件juan-tree的迭代式开发系列教程，感兴趣的小伙伴可以关注下哦~大家加油！

avatar
文章
阅读
粉丝