tailwindcss+react实现css in js

css in js的好处多多，这里就不多说了，直奔主题。这里使用tailwindcss+react实现了在react组件内完成html+js+css的开发。tailwindcss是在class内编写原子化css代码，使得组件内的css代码较少，且不会与其它css冲突，样式没有定义在组件的style里，因此还能实现媒体查询和伪类等高级功能。

import React,{useEffect} from 'react'
function CSS(num){
    const text={size:num}return {
        p:`text-${text.size}xl font-bold `,
        dp:`text-purple-700 `
    }
}
function User(props){
    const [css,setCss] = useState(CSS(6))
    const handleClick = ()=>{
        setCss(new CSS(2))
    }
    return(
        <div>
        <p className={css.p+css.dp} onClick={handleClick}>Hello,world</p>
        </div>
    )
}

挂载后css代码如下：

text-purple-700 {
    --text-opacity: 1;
    color: #6b46c1;
    color: rgba(107, 70, 193, var(--text-opacity));
}
.text-6xl {
    font-size: 4rem;
}
.font-bold {
    font-weight: 700;
}

点击后仅字体变小，css代码如下：

.text-purple-700 {
    --text-opacity: 1;
    color: #6b46c1;
    color: rgba(107, 70, 193, var(--text-opacity));
}

.text-2xl {
    font-size: 1.5rem;
}
.font-bold {
    font-weight: 700;
}

使用state管理组件样式有一下好处：

1. useState()Hook函数在第一次渲染时才会调用，不会有太大的性能损耗
2. 方便修改样式文件，只需生成新的样式组件赋值即可。
3. css作为组件的状态之一，十分合情合理，组件更加完整。

使用tailwindcss作为样式库的好处：

1. tailwind没有提供现成的组件样式，只提供一些utility用来编写css，十分灵活，能充分发挥创作者的想象力。
2. 样式写到class里，拥有css的全部功能。
3. 组件内的样式不会与组件外的样式冲突，除非你用tailwindcss生成的类名作为自己的类名。
4. 轻松使用模板编写动态css，而且代码量少。
5. 不用费脑思考div的类和名了

注意：

1. 在css生成函数中，变量和逻辑尽量写到函数内部，返回值是tailwindcss静态模板组件的对象
2. tailwindcss组件最后一个字符应是空格，这样在和其它组件累加时不会忘记加空格，造成css无法正常渲染。
3. tailwindcss组件的累加用‘+’来连接，其本质是字符串的连接。

 有一个不足之处，组件式开发时，如果把css写到js里，每次查看样式的最新效果，都要重新编译一遍程序，消耗时间过久。，而把样式写到css时，保存后最新效果立刻就能反映到页面上。