[英]React App adding Pure CSS to Tailwind CSS
我需要在 tailwind CSS 中为我的 React 应用程序执行此操作。
我怎样才能做到这一点?
HTML
<h1>Show / Hide Animation with pure CSS</h1>
<label class="trigger">
<input type="checkbox" class="checkbox checkbox--red" /> Show additional information
<span class="msg">
Hey there, I'm fading in/out with pure CSS. How cool is that?!
</span>
</label>
CSS
/**
* Notice: Checkbox is styled via import of my other pen (https://codepen.io/fxm90/pen/JdmaeL)
*/
.trigger {
input[type="checkbox"] {
// Hide content via default
& + span {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.33s, opacity 0.33s linear;
}
// Show if checkbox is clicked
&:checked + span {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
}
}
// Simple styling for message.
.msg {
display: block;
margin-top: 8px;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 3px;
}
这和上面代码笔链接中的一样。
**Edit as you need. I gave the basic example here. If you not find your solution, let me a reply**
import React, { useState } from "react";
const YourComponent = () => {
const [checked, setChecked] = useState(false);
const selectStyle = (e) => {
const checked = e.target.checked;
if (checked) {
setChecked(true);
} else {
setChecked(false);
}
};`enter code here`
return (
<>
<div className="px-20 my-10">
<h1>Show / Hide Animation with pure CSS</h1>
<label class="trigger">
<input
type="checkbox"
class="checkbox checkbox--red"
onClick={(e) => {
selectStyle(e);
}}
/>{" "}
Show additional information
<div
className={
checked
? "opacity-100 transition-opacity duration-1000 ease-out"
: "opacity-0 transition-opacity duration-1000 ease-out"
}
>
<span class="block mt-2 py-2 px-3 border border[#ddd] rounded ">
Hey there, I'm fading in/out with pure CSS. How cool is that?!
</span>
</div>
</label>
</div>
</>
);
};
export default YourComponent;
首先检查你是否导入了你的 css 文件
你必须 go 在你的 index.css 然后这样做
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
li{
@apply p-4;
}
button {
@apply text-white border bg-indigo-500 border-indigo-600
hover:bg-transparent hover:text-indigo-900 rounded-md
}
}
否则你必须创建一个新文件 css 然后输入你自己的 css 也将像往常一样在你可以使用 fileName.module.css,fileName.css 或定义你的 React css 属性的地方
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.