NextJS Tailwind 網站 offcanvas 菜單懸停/點擊事件不會在父維度之外發生
[英]NextJS Tailwind website offcanvas menu hover/tap events not happening outside of parent dimensions
我有一個 header，帶有從右側進入的畫布外菜單。 它按預期工作，除了一個問題：當菜單可見並打開時，鼠標/觸摸事件 go 直接穿過它下面的內容。 這是代碼： 自從我手工編寫畫布外菜單以來已經有好幾年了，所以我確定我遺漏了一些東西。 ...
如何避免在 Tailwind CSS 中將主題更改為暗模式
[英]How to avoid change theme to dark mode in Tailwind CSS
我在我的 Next.js 項目中使用tailwindcss 。 而且我的組件中沒有使用深色styles，所有組件都是淺色風格。 但是當操作系統主題更改為深色模式時，我的網站顯示為深色。 如何禁用暗模式自動更改我的項目？ ...
將@media print @page CSS 翻譯成 Tailwind
[英]Translate @media print @page CSS to Tailwind
我有以下 CSS：@media print { @page { size: ledger landscape; } } 我怎樣才能在 Tailwind 中做到這一點？ 我會把它放在哪里？ 理想情況下，它只應用於我的 React 應用程序的特定部分（因此不應用於<html&g ...
如何在 React 中使用 Tailwind 將狀態欄背景設為白色？
[英]How can I make my status bar background white with Tailwind in React?
我在一個網站上工作，使用 reactjs 和 tailwindcss 構建，現在我正試圖讓它在我的 iPhone (Safari) 上看起來不錯。 但我似乎無法將狀態欄/背景設為白色。 我試過用 React 頭盔添加元標簽，但這沒有做任何事情： 我試過這個： 但是也沒有任何東西可以使狀態欄變白. ...
如何在 react @shopify/polaris 中使用 tailwind 類
[英]How to use tailwind classes in react @shopify/polaris
我是 React 的新手，我使用的是 tailwind + @shopify/polaris，但 tailwind 類在這個庫中不起作用。 這是我的代碼： /** App.css */ @tailwind base; @tailwind components; @tailwind utilitie ...
根據 Vue3/Nuxt3 中的用戶輸入動態更改 tailwindcss 顏色
[英]Dynanically change tailwindcss color based on user input in Vue3/Nuxt3
我正在嘗試為用戶建立一種定義網站主色的方法。 在定義我的 tailwind 類時，我想使用類似bg-primary-600東西而不是對顏色進行硬編碼，這樣當primary的值發生變化時，它會更新樣式。 這里有我的測試環境： https://stackblitz.com/edit/nuxt-start ...
一些 Tailwind CSS styles 沒有被應用
[英]Some Tailwind CSS styles are not being applied
一些 Tailwind styles 沒有被應用。 在此圖像中，您可以看到向此 div 添加了兩個類，但是這些 styles 在 DOM 中不可用。 請幫助。 ...
使用 Tailwind CSS 隱藏移動版本的內容並在桌面上可見
[英]Hide content from mobile version and make visible on desktop, using Tailwind CSS
我嘗試使用 Tailwind hidden class 僅在移動屏幕上隱藏我頁面中的內容，但它在桌面版中隱藏，在移動版中可見。 我想要相反的。 我的代碼：<nav class="hidden lg:block">abc</nav> 我還嘗試使用visible和invisib ...
如何阻止兩個具有絕對定位的嵌套 div 相互重疊？
[英]How to stop two nested divs with absolute positioning from overlapping each other?
我目前正在開發的項目存在響應問題我有一個帶有兩個嵌套 div 的側邊欄（看起來彼此“分開”的部分 - 請參見下面的預覽），只要屏幕高度低於適合屏幕上所有元素所需的空間，它們就會相互重疊. 重疊元素我想知道如何阻止底部與頂部重疊並使側邊欄的內容從該點開始滾動（一旦“聲音檢測細節”容器開始與“STRO ...
使用 Tailwind 的全高柱 CSS
[英]Full-height column using Tailwind CSS
我有一個使用 Tailwind CSS 的 React 項目，我希望邊欄占據徽標下方的整個高度，並讓左側的鏈接具有特定寬度，但它不起作用 配置文件.jsximport { useContext, useState } from "react"; import { useLocation } fro ...
保持圖像縱橫比，同時將元素絕對定位在圖像頂部（tailwind 縱橫比插件）
[英]Maintaining image aspect-ratio while absolutely positioning elements on top of image (tailwind aspect ratio plugin)
我正在嘗試 position 絕對是圖像頂部的標簽。 我正在使用縱橫比插件來保持圖像的縱橫比，無論屏幕尺寸如何 https://github.com/tailwindlabs/tailwindcss-aspect-ratio 這是我的嘗試： https://play.tailwindcss.com ...
如何使用多個自定義設置 nativewind 元素的樣式 styles
[英]How to style nativewind element with multiple custom styles
我想用我自己的具有某些屬性的自定義類名來設計一個組件。 Tailwind 允許您通過 App.css 執行此操作，但在 React Native 應用程序中沒有。 您如何將“.title”class 添加到具有某些屬性的 tailwind 中？ 將其應用於文本 JSX object： ...
Webpack 與 Tailwind CSS JIT 集成
[英]Webpack with Tailwind CSS JIT integration
我目前很難將 Tailwind JIT 編譯器與 Webpack.js 集成。 目前幾乎一切正常（自定義 colors、自定義 fonts、自定義媒體查詢等...），除了 JIT 編譯器。 任何人都知道我做錯了什么？ （運行在Wordpress環境） 提前致謝！ 編輯：根據 Karl Hill 的 ...
為什么 tailwind 在我運行 npm run start 時不起作用，但在我運行 ng serve 時卻起作用
[英]Why tailwind does not work when I run npm run start, but it works when I run ng serve
我有一個 angular 15 應用順風。 代理.conf.json： package.json： 當我運行ng serve應用程序時，tailwind design 可以正常工作，但由於缺少代理，我無法與后端通信。 當我運行npm run start ，代理工作，但順風不工作。 它只顯示默認值 ...
下拉傳遞落后於 swiperjs、z-index 問題或 tailwindcss 問題？
[英]Dropdown pass behind swiperjs, z-index issue or tailwindcss issue?
我正在嘗試使用 SwiperJS，但我認為 z-index 有問題。 我的菜單位於 slider 下面，我不明白這是怎么回事。 我試圖在菜單上放置一個z-index: 1000 ，在 slider 上放置一個z-index: 1 。 我試圖在 slider 上放置一個z-index: -1並且它有 ...
帶有 Next.js 錯誤的 Tailwind：分號前應有一個反斜杠
[英]Tailwind with Next.js Error: Expected a backslash preceding the semicolon
我一直在努力解決這個問題。 一切正常，突然開始無法編譯。 運行 npm run dev 時出現此錯誤： 錯誤-./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].one ...
如何將 inline-flex label 與其周圍的文本垂直對齊？
[英]How do I align an inline-flex label vertically with the text surrounding it?
我有一個 label，它有display: inline-flex和 span。 我想將 label 居中，以便其文本的中間與文本的 rest 正確對齊。 未對齊 label 我怎么能這樣做？ 我想這是一個常見的問題，因為帶標簽的文本相當普遍。 我的代碼使用順風類。 我試過設置周圍文本的行高，但這 ...
在 reactjs 全局縮放 tailiwnd 字體大小
[英]Scaling tailiwnd font size in reactjs globally
在我的 React 應用程序中，使用 tailwind css，是否有任何我可以調整的全局設置，以便我的 fonts 隨屏幕尺寸縮放。 例如，在大於 2xl 的屏幕上，我希望我的 text-sm 為 1 rem 而不是默認的 0.875rem ...
將 SVG 垂直對齊到可用空間的中心
[英]Vertically align SVG to center of available space
我有一張 Tailwind 卡，它在大屏幕的左側顯示一個 SVG 圖標，在中等大小的屏幕和更小的屏幕上顯示在頂部。 我可以沿 x 軸對齊圖標。 但是，在 y 軸上我無法正確處理。 我使用了一些填充類，它們可以完成一些工作。 因為我可以將圖標從頂部移開，但這也會在圖標和下面的文本之間增加額外的空間。 ...
<img>標記和 CSS - 如何通過將圖像縮小到可用高度來停止溢出
[英]<img> tag and CSS - How to stop overflow by scaling the image down to the available height
我一直在嘗試在 Yew + tauri 中制作圖像查看器組件。 我正在為我的 css 使用 tailwindcss。我有一個列 flexbox： 圖像包含在一個 div 中。 主要標簽是： 我已經在<img>標簽和<div>標簽上嘗試了所有的object-x選項。 我已經在兩 ...