顺风旋转木马
Posted
技术标签:
【中文标题】顺风旋转木马【英文标题】：Tailwind Carousel 【发布时间】：2021-01-27 07:56:49 【问题描述】：我想使用 Tailwind CSS 制作轮播。但我无法将一些纯 CSS 转换为顺风 CSS。
如果无法将纯 CSS 转换为顺风 CSS，请告诉我如何在我的 react 项目中添加该 CSS。 我正在使用 REACT。
请帮我解决这个问题。
纯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>
【问题讨论】：
不可能将纯 CSS 转换为顺风 CSS，因为它是实用程序优先的 CSS 框架。 tailwindcss.com/docs/utility-first 你好@DevMaster 那么，我如何在顺风中应用这些 CSS 样式，或者请在顺风反应中提出一些其他的方法。 【参考方案1】：先看看Using Tailwind CSS with Create React App
在 Tailwind-CSS 中使用纯 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 的最简单方法是将它们添加到您的 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;
【讨论】：
如果我想自定义 tailwind.js 文件（即添加我自己的调色板），最好的方法是什么？ 参考：tailwindcss.com/docs/customizing-colors以上是关于顺风旋转木马的主要内容，如果未能解决你的问题，请参考以下文章