TailwindsCSS -隐藏段落

flvtvl50 于 2023-05-19 发布在其他

关注(0)|答案(2)|浏览(108)

我刚开始使用TailwindsCSS（今天才开始使用！）在使用Bootstrap多年后。
我已经建立了这一节，我试图隐藏突出显示（黄色）的文本在移动的设备上。x1c 0d1x我设法用类invisible md:visible“隐藏”了文本，但我更希望它实际上是实现了display:none，这样它就不会占用移动的屏幕上的任何空间，最终看起来像这样：

显然，我也尝试过使用Collapse类，但它不适用于段落。有什么建议吗？
注意：我确实还需要为平板电脑大小的屏幕做一些微调。
下面是我所拥有的代码：

<section style="background-color:rgba(216, 216, 216, 0.8);">
            <div class="container md:px-28 mx-auto pt-8 pb-12">
                <p class="text-3xl text-center pt-8 pb-6 lg:ml-16 lg:mr-16 lg:pl-16 lg:pr-16"><span style="color: #e11837;">Certified courses</span> to build your employees need to drive change in your organization</p>
                <p class="text-base text-center pb-8 invisible collapse lg:visible">CEDA’s micro-learning courses develop critical thinking, build leadership acumen and knowledge in areas such as public policy, economics and ESG – ready for application in an increasingly competitive business environment.</p>
                <div class="grid lg:grid-cols-3 md:grid-cols-2 gap-10 pt-2">
                    <div class="block bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]" style="background-image: url(Assets/esg_fundamentals.png); max-height:100%; max-width:100%; object-fit: contain;">
                        <p class="text-base text-center text-red border-b-2 border-white ml-16 mr-16 mb-4 pb-4 pt-6"><strong>Online learning</strong></p>
                        <p class="text-base text-center text-white pb-4">ESG Fundamentals</p>
                        <p class="text-xs text-center text-white pb-4 lg:mr-6 lg:ml-6">Understand Environmental, Social and Governance fundamentals and key concepts that impact organisations, now and into the future.</p>
                        <p class="text-sm text-center text-white font-bold pb-6"><a href="">View brochure -></a></p>
                    </div>
                    <div class="block bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]" style="background-image: url(Assets/economics_for_non_economists.jpg); max-height:100%; max-width:100%; object-fit: contain;">
                        <p class="text-base text-center text-red border-b-2 border-white ml-16 mr-16 mb-4 pb-4 pt-6"><strong>Online learning</strong></p>
                        <p class="text-base text-center text-white pb-4">Economics for Non-Economists</p>
                        <p class="text-xs text-center text-white pb-4 lg:mr-6 lg:ml-6">Gain insights into economic thinking, tools and principles, supply and demand, macroeconomics, fiscal and monetary policy, plus more.</p>
                        <p class="text-sm text-center text-white font-bold pb-6"><a href="">View brochure -></a></p>
                    </div>
                    <div class="block bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]" style="background-image: url(Assets/public_policy_dynamics.png); max-height:100%; max-width:100%;">
                        <p class="text-base text-center text-red border-b-2 border-white ml-16 mr-16 mb-4 pb-4 pt-6"><strong>Online learning</strong></p>
                        <p class="text-base text-center text-white pb-4">Public Policy Dynamics</p>
                        <p class="text-xs text-center text-white pb-4 lg:mr-6 lg:ml-6">Identify key drivers of public policy, gain leadership perspectives and learn practical applications to influence better outcomes.</p>
                        <p class="text-sm text-center text-white font-bold pb-6"><a href="">View brochure -></a></p>
                    </div>
                </div>
            </div>
        </section>

css

来源：https://stackoverflow.com/questions/76270114/tailwindscss-hiding-a-paragraph

2条答案

按热度按时间

dfuffjeb1#

您需要通过添加以下Tailwind类来合并display和visibility CSS属性：lg:visible invisible lg:block hidden。
请参见下面的片段。

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <h1 class="text-3xl font-bold underline">
    <section style="background-color:rgba(216, 216, 216, 0.8);">
      <div class="container md:px-28 mx-auto pt-8 pb-12">
        <p class="text-3xl text-center pt-8 pb-6 lg:ml-16 lg:mr-16 lg:pl-16 lg:pr-16"><span style="color: #e11837;">Certified courses</span> to build your employees need to drive change in your organization</p>
        <p class="text-base text-center pb-8 invisible collapse lg:visible invisible lg:block hidden">CEDA’s micro-learning courses develop critical thinking, build leadership acumen and knowledge in areas such as public policy, economics and ESG – ready for application in an increasingly competitive business environment.</p>
        <div class="grid lg:grid-cols-3 md:grid-cols-2 gap-10 pt-2">
          <div class="block bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]" style="background-image: url(Assets/esg_fundamentals.png); max-height:100%; max-width:100%; object-fit: contain;">
            <p class="text-base text-center text-red border-b-2 border-white ml-16 mr-16 mb-4 pb-4 pt-6"><strong>Online learning</strong></p>
            <p class="text-base text-center text-white pb-4">ESG Fundamentals</p>
            <p class="text-xs text-center text-white pb-4 lg:mr-6 lg:ml-6">Understand Environmental, Social and Governance fundamentals and key concepts that impact organisations, now and into the future.</p>
            <p class="text-sm text-center text-white font-bold pb-6"><a href="">View brochure -></a></p>
          </div>
          <div class="block bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]" style="background-image: url(Assets/economics_for_non_economists.jpg); max-height:100%; max-width:100%; object-fit: contain;">
            <p class="text-base text-center text-red border-b-2 border-white ml-16 mr-16 mb-4 pb-4 pt-6"><strong>Online learning</strong></p>
            <p class="text-base text-center text-white pb-4">Economics for Non-Economists</p>
            <p class="text-xs text-center text-white pb-4 lg:mr-6 lg:ml-6">Gain insights into economic thinking, tools and principles, supply and demand, macroeconomics, fiscal and monetary policy, plus more.</p>
            <p class="text-sm text-center text-white font-bold pb-6"><a href="">View brochure -></a></p>
          </div>
          <div class="block bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]" style="background-image: url(Assets/public_policy_dynamics.png); max-height:100%; max-width:100%;">
            <p class="text-base text-center text-red border-b-2 border-white ml-16 mr-16 mb-4 pb-4 pt-6"><strong>Online learning</strong></p>
            <p class="text-base text-center text-white pb-4">Public Policy Dynamics</p>
            <p class="text-xs text-center text-white pb-4 lg:mr-6 lg:ml-6">Identify key drivers of public policy, gain leadership perspectives and learn practical applications to influence better outcomes.</p>
            <p class="text-sm text-center text-white font-bold pb-6"><a href="">View brochure -></a></p>
          </div>
        </div>
      </div>
    </section>
  </h1>
</body>

</html>

赞(0）回复(0）举报 2023-05-19

8i9zcol22#

不要使用collapse类，它只会控制元素的可见性。所以，即使元素是不可见的，它仍然需要空间。
您可以给予显示：none使用class hidden。以下是示例代码段：

<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>

<section style="background-color:rgba(216, 216, 216, 0.8);">
            <div class="container md:px-28 mx-auto pt-8 pb-12">
                <p class="text-3xl text-center pt-8 pb-6 lg:ml-16 lg:mr-16 lg:pl-16 lg:pr-16"><span style="color: #e11837;">Certified courses</span> to build your employees need to drive change in your organization</p>
                <p class="text-base text-center pb-8 hidden md:block">CEDA’s micro-learning courses develop critical thinking, build leadership acumen and knowledge in areas such as public policy, economics and ESG – ready for application in an increasingly competitive business environment.</p>
                <div class="grid lg:grid-cols-3 md:grid-cols-2 gap-10 pt-2">
                    <div class="block bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]" style="background-image: url(Assets/esg_fundamentals.png); max-height:100%; max-width:100%; object-fit: contain;">
                        <p class="text-base text-center text-red border-b-2 border-white ml-16 mr-16 mb-4 pb-4 pt-6"><strong>Online learning</strong></p>
                        <p class="text-base text-center text-white pb-4">ESG Fundamentals</p>
                        <p class="text-xs text-center text-white pb-4 lg:mr-6 lg:ml-6">Understand Environmental, Social and Governance fundamentals and key concepts that impact organisations, now and into the future.</p>
                        <p class="text-sm text-center text-white font-bold pb-6"><a href="">View brochure -></a></p>
                    </div>
                    <div class="block bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]" style="background-image: url(Assets/economics_for_non_economists.jpg); max-height:100%; max-width:100%; object-fit: contain;">
                        <p class="text-base text-center text-red border-b-2 border-white ml-16 mr-16 mb-4 pb-4 pt-6"><strong>Online learning</strong></p>
                        <p class="text-base text-center text-white pb-4">Economics for Non-Economists</p>
                        <p class="text-xs text-center text-white pb-4 lg:mr-6 lg:ml-6">Gain insights into economic thinking, tools and principles, supply and demand, macroeconomics, fiscal and monetary policy, plus more.</p>
                        <p class="text-sm text-center text-white font-bold pb-6"><a href="">View brochure -></a></p>
                    </div>
                    <div class="block bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]" style="background-image: url(Assets/public_policy_dynamics.png); max-height:100%; max-width:100%;">
                        <p class="text-base text-center text-red border-b-2 border-white ml-16 mr-16 mb-4 pb-4 pt-6"><strong>Online learning</strong></p>
                        <p class="text-base text-center text-white pb-4">Public Policy Dynamics</p>
                        <p class="text-xs text-center text-white pb-4 lg:mr-6 lg:ml-6">Identify key drivers of public policy, gain leadership perspectives and learn practical applications to influence better outcomes.</p>
                        <p class="text-sm text-center text-white font-bold pb-6"><a href="">View brochure -></a></p>
                    </div>
                </div>
            </div>
        </section>

赞(0）回复(0）举报 2023-05-19

我来回答

TailwindsCSS -隐藏段落

2条答案

相关问题

热门标签

最新问答