前端基建：教你如何在Vue3项目中使用Tailwind CSS

挽晚风
1,398 阅读3分钟

前言

原子化CSS框架是一种特殊的CSS框架，它的设计理念是将样式规则分解为最小的可重用类名或属性，每个类名对应一个具体的样式。使用原子化CSS框架的好处如下：

  1. 快速开发：原子化CSS框架提供了大量的独立类名，您可以根据需求选择相应的类名来构建页面。这种方式使得开发人员能够快速地编写样式，而不必从零开始编写一堆样式规则。
  2. 可维护性：由于原子化CSS框架的样式是通过类名来定义的，因此在整个项目中可以保持一致的样式命名和结构。这种一致性使得样式的维护变得更加容易，可以简化代码的管理和修改过程。
  3. 代码复用：原子化CSS框架的设计目标是最大限度地提高样式的可重用性。通过重用类名，可以减少冗余的代码，并促进代码的复用。这样可以减少CSS文件的大小，提高网页加载速度，并提高开发效率。
  4. 灵活性：原子化CSS框架通常为每个样式提供多个选项，您可以根据需要组合这些选项来实现所需的样式效果。这种灵活性使得样式可以根据具体的页面需求进行定制，而不必拘泥于预定义的样式规则。
  5. 响应式设计：很多原子化CSS框架提供了响应式设计的支持，您可以根据屏幕尺寸选择适当的类名来定义不同屏幕下的样式。这使得页面可以自适应不同的设备，并提供更好的用户体验。

1、创建你的Vue项目

如果你还没有创建一个新的Vite项目，请从创建一个新的Vite项目开始。最常见的方法是使用Create Vite。

npm create vite@latest my-project -- --template vuecd my-project

2、下载 Tailwind CSS

安装tailwindcss及其同级依赖项，然后生成tailwind.config.js和postcss.config.js文件。

npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

3、配置模板路径

将路径添加到tailwind.config.js文件中的所有模板文件中。

// tailwind.config.js

/** @type {import('tailwindcss').Config} */ 
export default { 
    content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], 
    theme: { 
        extend: {}, 
    }, 
    plugins: [], 
}

4、将Tailwind指令添加到CSS中

将Tailwind的每个层的@tailwind指令添加到您的./src/style.css文件中。 并在main.ts中顶层引用该文件。

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

// 注意：必须顶层引用，否则会出现样式覆盖问题
import './src/style.css';
import { createApp } from 'vue';
const app = createApp(App);
app.mount('#app');

5、启动项目

npm run dev

5、开始在你的项目中使用Tailwind

<template> 
  <h1 class="text-3xl font-bold underline"> Hello world! </h1> 
</template>

6、注意

原子化CSS框架对于大型项目可能会导致样式的冗余和复杂性增加，因为它的样式是以类名方式存在的。因此，在选择使用原子化CSS框架之前，要综合考虑项目规模、样式需求和团队协作等因素。

7、结尾

到这里，就可以在Vue3项目中使用Tailwind CSS啦~

快去动手试一试吧~

如果觉得不错，动动你的小手指帮忙点个赞吧~

avatar
文章
阅读
粉丝