程序员经验分享-hwhale

顺风旋转木马

2024-03-23

我想使用 Tailwind CSS 制作一个轮播。但我无法将一些纯 CSS 转换为顺风 CSS。

如果无法将纯 CSS 转换为 tailwind 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>

首先看一下使用 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;
  }
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

ReactJS

tailwindcss

顺风旋转木马 的相关文章

随机推荐

  • 在 RESTful API 中存储身份验证令牌而不使用 HTTP 会话

    我正在构建一个具有多个服务器的 RESTful API 我想知道是否可以将访问令牌存储在中央数据库服务器中 然后对于每个请求 通过查询数据库然后执行操作来验证此访问令牌是否有效给予 如果我使用会话来完成这项工作 它会变得非 RESTful

  • Linq to Nhibernate 批量更新查询等效项？

    不确定我是否在这里遗漏了任何东西 基本上 我正在寻找 Linq to Nhibernate 来执行以下 SQL 语句 update SomeTable set SomeInteger SomeInteger 1 where SomeInte

  • 有人可以帮助我一些 JDBC 初学者吗？

    作为刚接触 Java 的 C 开发人员 我认为简单地显示一些 C 代码可能是最简单的 这样我就可以看到等效的 Java JDBC 调用是什么 String myConnectionString String mySql select nam

  • Angular 中令牌验证的最佳方法

    在使用 AngularJS 进行的 Web 应用程序开发中 使用令牌验证来进行身份验证 那么进行此验证的最佳方法是什么 例如 每次进行路由转换时都验证令牌 为此 每次我想验证时 我都必须拨打休息电话 通过一次休息调用仅验证令牌一次 然后将令

  • document.cookie 未返回所有 cookie

    我正在尝试使用以下方式读取我的域设置的所有 cookiedocument cookie我注意到 它只返回 csrftoken 和另一个值 我的目标是阅读sessionid从饼干 please see the below screenshot

  • 如何交互式地挑选

    我已经在一个分支上黑了一段时间了 这个分支很快就不会被合并了 但无论如何 我还是想将一些提交合并到 master 中 有没有办法获得交互式的挑选 它将显示提交及其更改 然后让我选择我真正想要挑选的内容 您可以使用提交图来做到这一点 gitk

  • Ruby 和修改 Float 实例的 self

    我想更改浮点实例的自身值 我有以下方法 class Float def round by precision self 10 precision round to f 10 precision end end 我想添加 round by 方

  • c++0x_warning.h:31:2：错误：

    我正在尝试创建一个文件并收到此错误 我是新手 有人能帮我一下吗 usr include c 4 6 bits c 0x warning h 32 2 error error This file requires compiler and l

  • Cocos2d 3.0中如何获取winSize

    我在Cocos2d 1 0和Cocos2d 2 0中使用了以下代码 但在Cocos2d 3 0中似乎找不到 CGSize s CCDirector sharedDirector winSize 如何在Cocos2d 3 0中获取屏幕尺寸 您

  • 如何使用 Unity 将基于 2D 数组的图块实例化到平台游戏中？

    我正在构建一个非常简单的平台游戏 使用 2D 数组来构建基于它的地图 我想要两个简单的目标 但目前还没有找到答案 确保相机为 16 9 并且我的场景将 100 显示在其中 像在数组中一样构建 2D 平台图块集 我的环境 Unity 5 5

  • C# 编码指南 [重复]

    这个问题在这里已经有答案了 可能的重复 C 编码标准 最佳实践 https stackoverflow com questions 14967 c coding standard best practices 您推荐哪些最流行 最合理且最详

  • 增加 gradle 的超时时间以获得 Maven 依赖

    我正在尝试通过以下方式从 Maven 获取 jar 依赖项grails 3 1 5 gradle依赖解析 如何增加 gradle 获取 Maven 依赖项所需的超时时间 当然 我已经看到依赖项需要更长的时间才能下载 但是我如何配置 grad

  • 从 flutter 应用程序中的 fireStore 获取带有索引的列表

    我正在尝试从 firestore 获取列表 但我遇到了索引问题 这是列表上普通项目的结构 每个对象都包含一个项目列表 class RestaurantFoodList final String id final String title L

  • 如何创建带有背景图像的倾斜透明形状？

    I want to achieve something like this it has a background image https imgur com cSde7ff I only able to make a slanted di

  • 由于 Javadoc 错误而无法构建 Maven 项目？

    有没有人遇到过类似的 Maven 错误 如下所示 由于以下错误 我无法构建我的项目 在我开始编写代码之前 一切都工作正常 我什至没有处理下面定义的接口 它似乎与 Javadoc 有关 ERROR Failed to execute goal

  • Trinidad/ADF Faces、文件上传、EOFException

    我在 Tomcat 8 5 服务器上的 web xml version 3 1 中使用 JSF 2 3 Mojarra 2 3 3 Trinidad 2 2 1 及其文件上传组件 tr inputFile 我收到以下异常 并且没有有效的上传

  • Winforms 窗体间切换

    我现在用的是winform 我有主表单 form1 还有一个打开 form2 的按钮 当我打开 form2 时 我希望 form1 消失 当用户单击 form2 上的 x 按钮时 我希望它关闭并返回到 form1 我不想使用模态窗口 pri

  • 进程资源不受 setrlimit 限制

    我编写了一个简单的程序 将其数据大小限制为 65Kb 并验证相同的情况 我分配了超过 65Kb 的虚拟内存 从逻辑上讲 如果我执行了所有正确的操作 如下所示 那么 malloc 调用应该会失败 不是吗 include

  • gcc(windows + MinGW) 是否在 inttypes.h 中定义了 SCNd8、SCNu8？

    include

  • 顺风旋转木马

    我想使用 Tailwind CSS 制作一个轮播 但我无法将一些纯 CSS 转换为顺风 CSS 如果无法将纯 CSS 转换为 tailwind CSS 请告诉我如何在我的 React 项目中添加该 CSS 我在用REACT 请帮我解决这个问

热门标签