是否有终端命令可通过Vite同时安装React+TailwindCSS？

直接使用以下链式命令，就能一步完成React项目创建、Tailwind依赖安装及配置工作，避免复制模板带来的文件系统异常：

NPM 版本 #

npm create vite@latest my-react-tailwind-app -- --template react && cd my-react-tailwind-app && npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && echo "/** @type {import('tailwindcss').Config} */
export default {
  content: [
    \"./index.html\",
    \"./src/**/*.{js,ts,jsx,tsx}\",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}" > tailwind.config.js && echo "@tailwind base;
@tailwind components;
@tailwind utilities;" > src/index.css && npm install && npm run dev

Yarn 版本 #

yarn create vite my-react-tailwind-app --template react && cd my-react-tailwind-app && yarn add -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && echo "/** @type {import('tailwindcss').Config} */
export default {
  content: [
    \"./index.html\",
    \"./src/**/*.{js,ts,jsx,tsx}\",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}" > tailwind.config.js && echo "@tailwind base;
@tailwind components;
@tailwind utilities;" > src/index.css && yarn && yarn dev

PNPM 版本 #

pnpm create vite my-react-tailwind-app -- --template react && cd my-react-tailwind-app && pnpm add -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && echo "/** @type {import('tailwindcss').Config} */
export default {
  content: [
    \"./index.html\",
    \"./src/**/*.{js,ts,jsx,tsx}\",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}" > tailwind.config.js && echo "@tailwind base;
@tailwind components;
@tailwind utilities;" > src/index.css && pnpm install && pnpm dev

命令说明 #

• 用Vite创建指定模板的React项目
• 进入项目目录
• 安装TailwindCSS及配套的PostCSS、Autoprefixer开发依赖
• 自动生成Tailwind和PostCSS的配置文件
• 覆盖Tailwind配置文件，添加React项目所有需要扫描的文件路径
• 替换全局CSS文件内容，引入Tailwind的基础样式、组件类和工具类
• 安装项目全部依赖并启动开发服务器

替换命令中的my-react-tailwind-app为你想要的项目名称即可。

内容的提问来源于stack exchange，提问作者kwyji