vite试探之tailwindcss的认识

1、新建文件夹pro-vite

2、新建package.json文件，终端运行npm install，pro-vite文件夹生成package-lock.json文件

3、终端运行npm install vite，pro-vite文件夹生成node_modules

4、新建index.html文件

5、打开package.json文件，加入以下配置，终端运行npm run dev

"scripts": {
    "dev": "vite"
},

6、浏览器访问地址http://127.0.0.1:8080/，展示index.html内容。

7、安装npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

8、运行npx tailwindcss init会在项目中生成一个tailwind.config.cjs文件。生成的文件需配置purge/content: [] 属性，值为空则样式不生效。当前版本为"tailwindcss": "^3.2.6"

Tailwidcss文档：https://www.tailwindcss.cn/docs/

The `purge`/`content` options have changed in Tailwind CSS v3.0.

完整配置如下：

  // /** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors')
module.exports = {
  // purge: ["./{src,Component}/**/*.{ts,tsx,jsx,js}"], 
  content: ["./{src,Component}/**/*.{ts,tsx,jsx,js}"],
  darkMode: `media`, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.coolGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.amber,
      green: colors.emerald,
      purple: colors.violet,  
      blue: colors.blue,    
      blueInit: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      },
      pink: {
        light: '#ff7ce5',
        DEFAULT: '#ff49db',
        dark: '#ff16d1',
      }
    }
  },
  variants: {
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  },
  plugins: [],
}

9、新建postcss.config.cjs文件

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
}

10、package.json中配置了"type": "module" ，要求导入使用import和export，

未配置的情况下可以使用 ES module 和 require。

11、函数组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
export default Welcome

12、class组件

import React from 'react'
class Welcome extends React.Component {
    props: { name: String; };
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}
export default Welcome

react@18

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis