记录一下todolist-dapp的css框架tailwind引入及应用
- 在创建的react app目录下下载tailwind依赖
（中文文档里的安装方式好像是create-react-app 4,会有错误，安装了样式一直不起效 我的是5）
//下载依赖
npm install -D tailwindcss
//初始化，产生tailwindcss.config.js文件
npx tailwindcss init
- 配置tailwind.config.js文件
第一次尝试tailwind这个框架，感觉还是很强大 可以在theme中定制各种自己的主题，也可以设置各种变体添加不同的特色效果
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
实例：给input框加一个点击下划线变色的效果
<li className="w-full h-10 border-t border-b border-gray-200
text-xl inline-block align-middle">
<input className="w-5 h-5 checked:bg-green-600"
type="radio" checked={choose} onChange={()=>doneTodo(index)}/>
{todo.content}
</li>
// 定制变体,添加效果
variants: {
extend: {
// ...
borderWidth: ['focus'],
}
},
- 给整体的index.css替换内容
@tailwind base;
@tailwind components;
@tailwind utilities;
- 在App.ts中引用
import "./index.css"
