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時，保存后最新效果立刻就能反映到頁面上。