我是使用TailwindsCSS的新手(今天才開(kāi)始用！)使用Bootstrap多年后。

我創(chuàng)建了這一部分，并試圖隱藏移動(dòng)設(shè)備上突出顯示的(黃色)文本。我設(shè)法用invisible md:visible類“隱藏”了文本，但我更希望它實(shí)際上實(shí)現(xiàn)了display:none，這樣它就不會(huì)占用手機(jī)屏幕上的任何空間。最終看起來(lái)像這樣:

顯然我也嘗試過(guò)使用Collapse class，但是它不適用于段落。 有什么建議嗎？

注意:我仍然需要為平板電腦的屏幕做一些微調(diào)。

以下是我所擁有的代碼:

<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>

不要使用collapse類，它只是控制元素的可見(jiàn)性。所以，即使元素是不可見(jiàn)的，它仍然占據(jù)空間。

您可以使用類hidden來(lái)顯示:none。以下是示例片段:-

<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>