准备工作

如果没有 yarn 可通过下面的命令安装：

npm i -g yarn

或者可以去下载最近的 yarn2: https://yarnpkg.com/getting-started/install

yarn 和 npm 相比可以并发的下载依赖，速度快很多，而 pnpm 在两者基础上更省空间

截止到目前 2023-10-12T23:54:08+08:00, yarn 已经相当稳定了，pnpm 可以算是激进派的选择， 个人推荐使用 yarn，它可以极大幅的节约拉取依赖的时间(相比于 NodeJs 自带的 npm)

VSCode 使用 TypeScript + React + tailwindcss

创建项目

yarn create vite <ProjectName> --template react-ts
cd <ProjectName>
yarn # yarn install 的缩写，安装依赖

安装 tailwindcss

https://www.tailwindcss.cn/docs/installation/using-postcss

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init

在项目根目录创建 postcss.config.js，并填入：

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

上面 npx tailwindcss init 在项目根目录创建了 tailwind.config.js，需要加入：

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

按照上面给出的网站，现在应该往 /src/index.css 中添加下面的内容：

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

消除警告

在 VSCode 中，可能会出现下面的警告 ⚠️：

vscode-tailwindcss-warning

可以通过直接 @import 来消除警告：

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

注意: 是 tailwindcss/* 而不是 tailwind/*

添加 tailwindcss 自动格式化 Prettier 插件

https://tailwindcss.com/blog/automatic-class-sorting-with-prettier

yarn add -D prettier prettier-plugin-tailwindcss

在项目根目录新建：prettier.config.js，追加以下内容：

export default {
  plugins: ["prettier-plugin-tailwindcss"],
};

Final step

yarn dev

打开监听的网页开始开发

补充：通过 .vscode 配置文件消除警告

https://github.com/tailwindlabs/tailwindcss/discussions/5258#discussioncomment-1979394

上面我用直接 @import 的方法来消除了 @tailwind 的警告，但对于 @apply 等这种方法并不适用

类似上述 @apply 的警告，可以参考下面的方法消除：

  1. 在项目根目录新建 .vscode 文件夹并新建：
    • settings.json
    • tailwind.json
  2. 分别填入以下内容：
  • settings.json
{
  "css.customData": [".vscode/tailwind.json"]
}
  • tailwind.json
{
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@tailwind",
      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
        }
      ]
    },
    {
      "name": "@apply",
      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
        }
      ]
    },
    {
      "name": "@responsive",
      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
        }
      ]
    },
    {
      "name": "@screen",
      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
        }
      ]
    },
    {
      "name": "@variants",
      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
        }
      ]
    }
  ]
}

通过 tailwind CSS intelliSence 插件消除警告

https://www.codeconcisely.com/posts/tailwind-css-unknown-at-rules/#installing-tailwind-css-intellisense-plugin

  1. 打开要引入 tailwind 的 css 文件
  2. Ctrl + Shift + P，然后输入 change language mode
  3. 选择 tailwindcss 就可以解决了

当然需要先下载官方插件

但是当关闭文件再打开后会发现仍然报错，具体可以按照如下方式解决：

  1. 在项目根目录中新建 .vscode/settings.json
  2. 填入：
{
  "files.associations": {
    "*.css": "tailwindcss"
  }
}

这样会将当前项目中所有的 css 文件识别为 tailwindcss 类型，关闭 css 后再打开就没问题了（当然解决的还是不够合理，因为其他 css 文件的识别类型被改变了）

其他 yarn 命令

https://classic.yarnpkg.com/en/docs/cli/

Reference

使用 Vite 创建项目模板：https://vitejs.dev/guide/#scaffolding-your-first-vite-project

tailwindcss 格式化原子 CSS 顺序：https://tailwindcss.com/blog/automatic-class-sorting-with-prettier

tailwindcss 官方 Prettier 插件：https://github.com/tailwindlabs/prettier-plugin-tailwindcss

消除 tailwindcss 在 VSCode 中不必要的警告：https://github.com/tailwindlabs/tailwindcss/discussions/5258#discussioncomment-1979394