首先看一下使用 Tailwind CSS 和 Create React App https://tailwindcss.com/docs/adding-new-utilities#app
有两种方法可以将纯 CSS 与 Tailwind-CSS 一起使用
创建一个新的.css
文件并将它们放入其中。
然后将其导入到React组件中。
app.css
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
#carousel-1:checked
~ .control-1
~ .carousel-indicators
li:nth-child(1)
.carousel-bullet,
#carousel-2:checked
~ .control-2
~ .carousel-indicators
li:nth-child(2)
.carousel-bullet,
#carousel-3:checked
~ .control-3
~ .carousel-indicators
li:nth-child(3)
.carousel-bullet {
color: #2b6cb0;
}
app.js
import './App.css'
import './tailwind.out.css'
...
- 使用您自己的自定义实用程序类扩展 Tailwind。 https://tailwindcss.com/docs/adding-new-utilities#app
将您自己的实用程序添加到 Tailwind 的最简单方法是将它们添加到您的 CSS 中。
tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
#carousel-1:checked
~ .control-1
~ .carousel-indicators
li:nth-child(1)
.carousel-bullet,
#carousel-2:checked
~ .control-2
~ .carousel-indicators
li:nth-child(2)
.carousel-bullet,
#carousel-3:checked
~ .control-3
~ .carousel-indicators
li:nth-child(3)
.carousel-bullet {
color: #2b6cb0;
}
}