在 Vue 3 和 Vite 安装 Tailwind CSS - Tailwind CSS 中文文档

[](https://www.tailwindcss.cn/docs/guides/vue-3-vite#)创建您的工程

如果您还没有建立一个新的 Vite 项目，请先创建一个新的项目。

npm init vite my-project
cd my-project

接下来，使用 npm 安装 Vite 的前端依赖关系。

npm install
    • *

[](#tailwind-css)初始化 Tailwind CSS

Tailwind CSS requires Node.js 12.13.0 or higher.

[](#install-tailwind-via-npm)Install Tailwind via npm

安装 Tailwind 以及其它依赖项:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

[](#-1)创建您的配置文件

接下来，生成您的 tailwind.config.js 和 postcss.config.js 文件：

npx tailwindcss init -p

这将会在您的项目根目录创建一个最小化的 tailwind.config.js 文件：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

阅读配置文档了解更多。

这也将会创建一个包含已配置好的 tailwindcss 和 autoprefixer 的 postcss.config.js 配置文件：

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

如果您计划使用其它的 PostCSS 插件，请阅读我们的将 PostCSS 作为您的 preprocessor 的文档。

[](#tailwind)配置 Tailwind 来移除生产环境下没有使用到的样式声明

在您的 tailwind.config.js 文件中，配置 purge 选项指定所有的 pages 和 components 文件，使得 Tailwind 可以在生产构建中对未使用的样式进行摇树优化。

  // tailwind.config.js
  module.exports = {
-   purge: [],
+   purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

请阅读我们单独的优化生产指南，以了解更多关于摇树优化未使用的样式来获得最佳性能的信息。

[](#css-tailwind)在您的 CSS 中引入 Tailwind

创建 ./src/index.css 文件 并使用 @tailwind 指令来包含 Tailwind的 base、 components 和 utilities 样式，来替换掉原来的文件内容。

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind 会在构建时将这些指令转换成所有基于您配置的设计系统生成的样式文件。

阅读我们的文档添加基础样式，提取组件，和添加新的功能类，以获得用您自己的自定义 CSS 扩展 Tailwind 的最佳实践。

最后，确保您的 CSS 文件被导入到您的 ./src/main.js 文件中。

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

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

您已经完成了所有步骤！现在，当您运行 npm run dev, Tailwind CSS 就可以在您的 Vue 3 and Vite 项目中使用了。

接下来了解一下功能类优先的工作流程 →

原网址: 访问
创建于: 2022-01-19 12:44:38
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论