问题
I want to make a carousel using Tailwind CSS. But I am not able to convert some pure CSS into tailwind CSS.
If it is not possible to convert that pure CSS into tailwind CSS then please tell me how to add that CSS in my react project. I am using REACT.
Please help me with this issue.
Pure 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;
}
HTML:
<div class="carousel relative shadow-2xl bg-white">
<div class="carousel-inner relative overflow-hidden w-full">
<!--Slide 1-->
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
<div class="carousel-item absolute opacity-0" style="height:50vh;">
<div class="block h-full w-full bg-indigo-500 text-white text-5xl text-center">Slide 1</div>
</div>
<label for="carousel-3" class="prev control-1 w-10 h-10 ml-2 md:ml-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-blue-700 leading-tight text-center z-10 inset-y-0 left-0 my-auto">‹</label>
<label for="carousel-2" class="next control-1 w-10 h-10 mr-2 md:mr-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-blue-700 leading-tight text-center z-10 inset-y-0 right-0 my-auto">›</label>
<!--Slide 2-->
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item absolute opacity-0" style="height:50vh;">
<div class="block h-full w-full bg-orange-500 text-white text-5xl text-center">Slide 2</div>
</div>
<label for="carousel-1" class="prev control-2 w-10 h-10 ml-2 md:ml-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-blue-700 leading-tight text-center z-10 inset-y-0 left-0 my-auto">‹</label>
<label for="carousel-3" class="next control-2 w-10 h-10 mr-2 md:mr-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-blue-700 leading-tight text-center z-10 inset-y-0 right-0 my-auto">›</label>
<!--Slide 3-->
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item absolute opacity-0" style="height:50vh;">
<div class="block h-full w-full bg-green-500 text-white text-5xl text-center">Slide 3</div>
</div>
<label for="carousel-2" class="prev control-3 w-10 h-10 ml-2 md:ml-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-blue-700 leading-tight text-center z-10 inset-y-0 left-0 my-auto">‹</label>
<label for="carousel-1" class="next control-3 w-10 h-10 mr-2 md:mr-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-blue-700 leading-tight text-center z-10 inset-y-0 right-0 my-auto">›</label>
<!-- Add additional indicators for each slide-->
<ol class="carousel-indicators">
<li class="inline-block mr-3">
<label for="carousel-1" class="carousel-bullet cursor-pointer block text-4xl text-white hover:text-blue-700">•</label>
</li>
<li class="inline-block mr-3">
<label for="carousel-2" class="carousel-bullet cursor-pointer block text-4xl text-white hover:text-blue-700">•</label>
</li>
<li class="inline-block mr-3">
<label for="carousel-3" class="carousel-bullet cursor-pointer block text-4xl text-white hover:text-blue-700">•</label>
</li>
</ol>
</div>
</div>
回答1:
First take a look at Using Tailwind CSS with Create React App
There are two ways to use pure CSS with Tailwind-CSS
- Very normal way as we always did
Create a new .css file and put them into it.
Then import it into the React component.
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'
...
- Extending Tailwind with your own custom utility classes.
The easiest way to add your own utilities to Tailwind is to simply add them to your 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;
}
}
来源：https://stackoverflow.com/questions/64327412/tailwind-carousel