在现有项目上安装 TailwindCSS

2024-04-18

注意：这是在现有的 Vue 项目中补充安装 tailwind 的方法，如果是全新的项目，可以参考官网。

安装，并初始化一个配置文件 tailwind.config.js

npm i -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

修改 tailwind.config.js 配置文件中 content 的内容

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

最后要在你的主 CSS 文件中，比如 assets/main.css 中头部增加以下引用：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

为了方便使用与学习，接下来要安装 VSCode 的插件，在插件库中搜索 tailwind ，下载量最高的那个就是。

插件还需要进行以下配置：

打开 VSCode 配置文件 settings.json
将以下代码粘贴到尾部：

{
  "files.associations": {
    "*.css*": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  }
}

#笔记 #前端

PREV 给博客增加 giscus 评论系统
NEXT 使用 Bun 快速启动一个 Vue + Vite 项目