vue 3 第三十五章：集成 tailwind Css

剑九_六千里

已于 2023-06-10 21:37:35 修改

阅读量4.3k

点赞数 2

分类专栏： # Vue3 文章标签： css vue.js javascript

于 2023-06-10 21:30:04 首次发布

本文链接：https://blog.csdn.net/to_the_Future/article/details/131093102

版权

Vue3 专栏收录该内容

36 篇文章 64 订阅

订阅专栏

文章目录

1. tailWind css介绍
2. tailWind css基本使用
3. 补充
- 3.1. 语法提示
- 3.2. 个性化定制
4. 总结

1. tailWind css介绍

Tailwind CSS 是一个实用的 CSS 框架，旨在帮助开发人员快速构建现代网站和 Web 应用程序。它提供了一组可重用的 CSS 类，可用于几乎任何类型的 UI 组件和布局。

与传统的 CSS 框架不同，Tailwind 不会预定义任何样式。相反，它将样式定义为独立的类，使开发人员可以按需使用它们。例如，要添加一个按钮，只需将适当的类添加到 HTML 元素上，而不必为每个按钮编写自定义 CSS。

Tailwind 还提供了广泛的定制选项，以便根据需要调整样式。这包括设置颜色，间距和字体等属性。通过修改配置文件，开发人员可以轻松地自定义 Tailwind 的外观和功能。

Tailwind 支持响应式设计。在 CSS 中处理一大堆复杂的媒体查询（media queries）是很糟糕的，而 Tailwind 能够让你在 HTML 中直接支持响应式设计。

更多请查看tailWind css官方文档

2. tailWind css基本使用

2.1. 步骤一：安装Tailwind CSS

首先，我们需要安装Tailwind CSS和它的相关依赖。可以使用npm或者yarn来安装，具体命令如下：

npm install -D tailwindcss postcss autoprefixer

或者

yarn add -D tailwindcss postcss autoprefixer

2.2. 步骤二：创建配置文件

接下来，我们需要创建Tailwind CSS的配置文件。可以使用npx来创建，具体命令如下：

npx tailwindcss init

这将在项目根目录下创建一个名为tailwind.config.js的配置文件。

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 未使用的类名，不会打包到生产环境
  content: ["index.html", "./src/**/*.{html,js,ts,jsx,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Tips: 或者我们直接 npx tailwindcss init -p 这将在项目根目录下创建一个名为tailwind.config.js和一个名为postcss.config.js的配置文件。这样的话就不需要步骤三了。

2.3. 步骤三：配置PostCSS

我们还需要配置PostCSS来使用Tailwind CSS。可以创建一个名为postcss.config.js的文件，并添加以下内容：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

2.4. 步骤四：引入样式文件

最后，我们需要在main.js文件中引入Tailwind CSS的样式文件。可以创建一个名为tailMain.css的文件，并将其引入到main.ts文件中：

/* tailMain.css */ 
/* 将以下几行代码配置在tailMain.Css文件中 */ 
@tailwind base;
@tailwind components;
@tailwind utilities;

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './assets/tailMain.css'

createApp(App).mount('#app')

2.5. 步骤五：模板中使用tailWind css

纯 html，没有特别多样式，代码非常干净

<template>
  <div
    class="w-screen h-screen bg-black border-slate-600 font-bold text-8xl text-stone-50 text-center"
  >
    TailWind Css
  </div>
</template>