TailwindCSS框架学习：基于NUXT框架的安装

这块内容很简单，相当于一个插眼，安装出处对应的中文官网地址：在 Nuxt.js 中安装 Tailwind CSS - Tailwind CSS 中文文档，我使用的是中文的文档。但是请注意：中文文档现在版本在V2.2.16，官方文档已经在V3.2.7了，所以可以对照着看。

安装

1. 安装 @nuxtjs/tailwindcss 和 Tailwind 以及其它依赖项:

yarn add -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest

2. 将 @nuxtjs/tailwindcss 模块添加到您的 nuxt.config.js 文件的 modules 部分。

Nuxt脚手架的配置文档在：Nuxt Configuration Reference · Nuxt，点击该文档看到modules的介 绍。

从官方的示例，我们选择第一个描述Using package name，这个package name在你使用yarn add -D后，可以在package.json中的devDependencies看到。

export default defineNuxtConfig({
  modules:[
    '@nuxtjs/tailwindcss'
  ]
});

创建配置文件

创建 tailwind.config.js文件。

npx tailwindcss init

具体配置：英文；中文;也是先贴出来学习路径，后续研究。

在 项目的CSS 中引入 Tailwind

在目录 ./assets/css/tailwind.css 文件 并使用 @tailwind 指令来包含 Tailwind的 base、 components 和 utilities 样式，如下：

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

大功告成。