“Yeah It’s on. ”
tailwindcss
Just-in-Time Mode
https://v2.tailwindcss.com/docs/just-in-time-mode
Tailwind CSS v2.1 introduces a new just-in-time compiler for Tailwind CSS that generates your styles on-demand as you author your templates instead of generating everything in advance at initial build time.
unocss
https://github.com/unocss/unocss
@unocss/inspector
The inspector UI for UnoCSS. Ships with unocss and @unocss/vite.
@unocss/vite 应该已经自带这个了 （无需额外安装）
Visit http://localhost:3000/__unocss in your Vite dev server to see the inspector.
就可以看到效果了
css in js
Ant Design 5.0放弃了跟随 antd 已久的 less 方案，转而拥抱 CSS-in-JS。
- 更小的 BundleSize；
- 不依赖任何插件的样式按需引入能力。
Emotion
Emotion is a library designed for writing css styles with JavaScript
react
// .babelrc
{
"presets": [
[
"@babel/preset-react",
{ "runtime": "automatic", "importSource": "@emotion/react" }
]
],
"plugins": ["@emotion/babel-plugin"]
}
然后组件就可以使用css props了
const AnotherComponent = () =>
<div css=>Some text with an underline.</div>;
vite
https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react({
jsxImportSource: '@emotion/react',
})],
})
