使用postcss完善vite-react-tailwindcss中的css配置（TypeScript版本）

使用`postcss`完善`vite-react-tailwindcss`中的`css`配置（TypeScript版本）

前情提要：

网上大多数的vite+ts项目基本都是使用的postcss.config.js或者postcss.config.cjs作为配置，想使用postcss.config.ts作为配置并集成进入monorepo项目中去，故记录；

创建项目

 # 使用vite创建项目 填写项目名称 框架 和 语言支持 
 pnpm create vite
 -- 语言支持这里选择的是typescript

集成`tailwindcss`

初始化tailwindcss

 pnpm add -D tailwindcss postcss autoprefixer
 pnpx tailwindcss init

初始化完成以后项目的根目录下会生成一个tailwind.config.js文件，将其修改为tailwind.config.ts文件，配置需要按需配置

 // tailwind.config.ts
 import type { Config } from 'tailwindcss';
 
 const config: Config = {
   content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', './public/index.html', './index.html'],
   theme: {
     extend: {
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
     },
   },
   plugins: [],
 };
 
 export default config;

在项目的根目录下新建postcss.config.ts

 import autoprefixer from 'autoprefixer';
 import postcss from 'postcss';
 import tailwind from 'tailwindcss';
 import tailwindConfig from './tailwind.config';
 
 export default postcss([tailwind(tailwindConfig), autoprefixer]);

解释一下这里导出一个postcss的原因：

1、在vite中的css预处理器配置的postcss需要的类型是：

2、postcss()返回的是一个Processor

3、Pocessor中

然后修改tsconfig.node.json文件

 {
   "compilerOptions": {
     "composite": true,
     "skipLibCheck": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
   "include": ["vite.config.ts", "postcss.config.ts", "tailwind.config.ts"]
 }

接下来修改vite.config.ts

 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 import postcss from './postcss.config';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
   // css预处理器
   css: {
     postcss,
   },
 });

新建src/components/MyComponent.tsx

 // src/components/MyComponent.tsx
 // 如果安装了react snippet的就使用快捷键rfce
 
 import { ReactElement } from 'react';
 
 function MyComponent(): ReactElement {
   return <div className="bg-blue-500 text-white p-4">This is a blue background with white text.</div>;
 }
 
 export default MyComponent;

新建src/styles/variable.css

 // src/styles/variable.css
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 :root {
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground-rgb: 255, 255, 255;
     --background-start-rgb: 0, 0, 0;
     --background-end-rgb: 0, 0, 0;
   }
 }
 
 body {
   color: rgb(var(--foreground-rgb));
   background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
 }
 
 @layer utilities {
   .text-balance {
     text-wrap: balance;
   }
 }

在src/main.ts中导入并使用编写好的组件MyComponent和全局样式文件variable.css

 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import MyComponent from './components/MyComponent';
 import './styles/variable.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <MyComponent />
   </React.StrictMode>,
 );

测试运行

 pnpm dev

运行截图，这里我修改了vite.config.ts中的server的相关配置，故不为默认运行端口。

使用postcss完善vite-react-tailwindcss中的css配置（TypeScript版本）