Skip to main content

创建 React + TypeScript + TailwindCSS 项目

· 6 min read
Alan

创建项目​

参考文档 vite

mkdir vite-cli
cd vite-cli
npm init -y
npm install -D create-vite@latest
npx create-vite my-react-app-name --template react-ts

注意上面创建一个目录(vite-cli)之后再创建项目, 是不想全局安装 create-vite 脚手架工具

安装 TailwindCSS​

官网

初始化​

cd my-react-app-name && npm install # 需要切换到项目根目录
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init --postcss --ts

配置​

创建配置文件:

tailwind.config.ts
import type {Config} from "tailwindcss";

const config: Config = {
  content: [
    "./index.html",
    "./src/**/*.{jsx,tsx,mdx}"
    // Path to Tremor module
    // './node_modules/@tremor/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        // 这是个示例, 代码里可以使用 font-code 作为 className 名称
        code: "Consolas, 'Courier New', monospace"
      }
    }
  },
  safelist: [],
  plugins: []
};

export default config;

或者使用 JavaScript 的配置文件:

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

引用​

在项目的样式文件里引用 tailwind:

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

/** 你的其他样式内容 */

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  .filter-none {
    filter: none;
  }
  .filter-grayscale {
    filter: grayscale(100%);
  }
}

VSCode​

  • 安装依赖 npm install -D prettier prettier-plugin-tailwindcss
  • 安装扩展 bradlc.vscode-tailwindcss 和 esbenp.prettier-vscode

修改配置​

.vscode/settings.json
{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/Thumbs.db": true,
    ".next": true,
    "node_modules": true,
    "dist": true
  },
  "editor.formatOnSave": true,
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.maxTokenizationLineLength": 2500,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
.prettierrc.json
{
  "plugins": ["prettier-plugin-tailwindcss"],
  "printWidth": 150,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "jsxSingleQuote": false,
  "quoteProps": "as-needed",
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "arrowParens": "avoid",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf",
  "singleAttributePerLine": true
}

Bootstrap​

如果项目想同时使用 Bootstrap, 可以使用以下方式

npm install bootstrap --save
npm install sass --save-dev

创建 src/bootstrap.scss 文件:

src/bootstrap.scss
$success: #7952b3;
$grid-breakpoints: (
  // No media query for `xs` since this is the default in Bootstrap
  xs: 0,
  // Small devices (landscape phones, 576px and up)
  sm: 576px,
  // Medium devices (tablets, 768px and up)
  md: 768px,
  // Large devices (desktops, 992px and up)
  lg: 992px,
  // X-Large devices (large desktops, 1200px and up)
  xl: 1200px,
  // XX-Large devices (larger desktops, 1400px and up)
  xxl: 1400px
);

@import "bootstrap/scss/bootstrap.scss";

// 以下是示例代码, 可以删除

.show-only-xs {
  display: none;
}

@include media-breakpoint-down(sm) {
  .show-only-xs {
    display: block;
  }
}

.show-only-sm {
  display: none;
}

@include media-breakpoint-between(sm, md) {
  .show-only-sm {
    display: block;
  }
}

.show-only-xxl {
  display: none;
}

@include media-breakpoint-up(xxl) {
  .show-only-xxl {
    display: block;
  }
}
danger

为了解决 Bootstrap 和 TailwindCSS 同名 class 冲突问题, 可以将 TailwindCSS 的 class 名称增加前缀, 修改配置文件 tailwind.config.{ts,js}, 增加配置 prefix: "tw-" 即可:

tailwind.config.ts
import type { Config } from "tailwindcss";

export default {
  // ... 其他配置
  prefix: "tw-"
} satisfies Config;

然后如果要使用 TailwindCSS , 就需要在class名称前增加 tw- 前缀, 比如之前写 my-5, 现在需要写成 tw-my-5.

淘宝镜像​

镜像官网官网

.npmrc
registry=https://registry.npmmirror.com

完整 shell 脚本​

可以以下脚本文件之后, 执行 create-react-project.sh my-react-app-name 即可:

create-react-project.sh
PROJECT_NAME=$1

if [ -d "vite-cli" ]; then
  echo "目录 vite-cli 已经存在, 直接使用."
else
  mkdir vite-cli
fi

cd vite-cli
if [ -f "package.json" ]; then
  echo "已经是npm项目"
**else**
  npm init -y
fi
npm install -D create-vite@latest --registry=https://registry.npmmirror.com
npx create-vite $PROJECT_NAME --template react-ts
cd $PROJECT_NAME
echo "registry=https://registry.npmmirror.com" > .npmrc
npm install
npm install -D tailwindcss prettier prettier-plugin-tailwindcss postcss autoprefixer
npx tailwindcss init --postcss --ts
mkdir .vscode

cat > tailwind.config.ts << 'EOF'
import type {Config} from "tailwindcss";

const config: Config = {
  content: [
    "./src/**/*.{jsx,tsx,mdx}"
    // Path to Tremor module
    // './node_modules/@tremor/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    transparent: "transparent",
    current: "currentColor",
    extend: {
      fontFamily: {
        // 这是个示例, 代码里可以使用 font-code 作为 className 名称
        code: "Consolas, 'Courier New', monospace"
      }
    }
  },
  safelist: [],
  plugins: []
};

export default config;
EOF

cat > src/index.css << 'EOF'
@tailwind base;
@tailwind components;
@tailwind utilities;

/** 你的其他样式内容 */

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  .filter-none {
    filter: none;
  }
  .filter-grayscale {
    filter: grayscale(100%);
  }
}
EOF

cat > .vscode/settings.json << 'EOF'
{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/Thumbs.db": true,
    ".next": true,
    "node_modules": true,
    "dist": true
  },
  "editor.formatOnSave": true,
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
EOF

cat > .prettierrc.json << 'EOF'
{
  "plugins": ["prettier-plugin-tailwindcss"],
  "printWidth": 150,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "jsxSingleQuote": false,
  "quoteProps": "as-needed",
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "arrowParens": "avoid",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf",
  "singleAttributePerLine": true
}
EOF
code vite-cli/$1