标签: tailwind-css
如何顺风聚焦 div 标签？
我正在使用 Tailwind 和 Vue 来制作一些可重用的切换组件。组件的边框是灰色的，但计划是当我单击组件时，边框将是红色的，如下图所示（我正在使用/尝试使用焦点）。
问题是因为我可以仅在输入和按钮上使用焦点，但我需要焦点在 div 标签上
我有一个 div，里面有两个段落和一个输入（类型：复选框）。我尝试使用 tabindex 但它不起作用，当我单击复选框或输入字段（灰色按钮）时它不聚焦。仅当我单击组件内部而不是复选框字段时才聚焦。
代码是
<template>
<div>
<div tabindex="1"
class="relative border border-gray-300 px-10 max-w-md mx-auto my-2 cursor-pointer rounded-lg px-5 py-4 rounded-lg border bg-white transition duration-150
ease-in-out placeholder:text-zinc-400 hover:bg-zinc-100 focus:border-transparent
focus:outline-none focus:ring disabled:opacity-50 motion-reduce:transition-none
dark:bg-zinc-900 dark:placeholder:text-zinc-500 dark:hover:bg-zinc-800" :class="[ error
? 'border-red-500 caret-red-500 focus:ring-red-500/50'
: 'border-zinc-300 caret-primary focus:ring-primary/50 dark:border-zinc-600 dark:focus:border-transparent',
]"
>
<div class="flex justify-between">
<div>
<h1 class="text-md font-semibold text-black">
{{ titleToggle }}
</h1>
<p class="inline text-md text-gray-500">
{{ subtitleToggle }}
</p>
</div>
<label …推荐指数
解决办法
查看次数
Laravel 应用在生产环境中是否需要 Vite 开发服务器
我正在进行一个新Laravel9的Vite3项目TailwindCss3。
问题
仅使用npm run build不足以部署应用程序！
当我不运行 Vite 的开发服务器时，出现以下错误：
无法在 Vite 清单中找到文件：resources/css/app.css。
但当我使用时npm run dev一切正常！
繁殖
我使用了以下命令：
laravel new vite-test --git &&
cd .\vite-test\ &&
npm i &&
npm install -D tailwindcss postcss autoprefixer &&
npx tailwindcss init -p &&
php ./artisan serve
并按照文档编辑了以下文件：
<!-- resources\views\welcome.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div class="h-screen w-screen bg-red-500"></div>
</body>
</html>
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = { …推荐指数
解决办法
查看次数
与顺风动态内联更改类属性
如何使用带有 tailwind 内联 css 的字符串文字传递动态值？
例如，我想动态更改宽度，而不是使用预制的顺风 w-1、w-2 等...
<div
class="p-1 border-2 width: {createTimeBlock(
show.startTime,
show.endTime,
)}px">
{show.startTime} to {show.endTime}
</div>
推荐指数
解决办法
查看次数
使用 NextJS 和 Tailwind CSS 不会改变文本颜色
在我的 NextJS 应用程序中，我使用<h1>文本标签并将其包装在 a 中，<div>但是当我尝试对文本应用颜色时，它不起作用。我什至添加了我的global.css但它引发了错误。
<div className="mt-2 flex justify-start items-center text-2xl font-bold text-gray-300">
<Image
src={Logo}
width={40}
height={40}
/>
<h1>some text here</h1>
</div>
上面的代码不会引发错误，但它也不会将样式应用于文本。
样式/global.css
<div className="mt-2 flex justify-start items-center text-2xl font-bold text-gray-300">
<Image
src={Logo}
width={40}
height={40}
/>
<h1>some text here</h1>
</div>
在基础层（上面）中应用样式会引发以下错误。
.../styles/globals.css 该类
text-gray-300不存在。如果text-gray-300是自定义类，请确保它是在@layer指令中定义的。
tailwind.config.js
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base{
body{
@apply bg-[#06202A] text-gray-300;
}
}
postcss.config.js
@type {import('tailwindcss').Config} */
module.exports = {
mode: "jit", …推荐指数
解决办法
查看次数
如何在表格内制作自动包装？
我正在尝试使用 Tailwind CSS 在表格行内制作一个文字包装器，但它似乎不起作用。我究竟做错了什么？
\n我是：
\n- \n
- 使表格成为：“w-full” \n
- 使 td 和 pa 成为“突破所有” \n
- 给 tr 一个最大宽度 \n
这是代码：
\n <div className="py-5 ">\n <div className="overflow-x-auto">\n <table className="w-full max-w-4xl mx-auto overflow-hidden bg-white divide-y divide-gray-300 rounded-lg whitespace-nowrap">\n <thead className="bg-gray-900">\n <tr className="text-left text-white">\n <th className="px-6 py-4 text-lg font-semibold "> n \xc2\xb0 </th>\n <th className="px-3 py-4 text-lg font-semibold "> Song </th>\n <th className="px-3 py-4 text-lg font-semibold text-center "> Best Singers </th>\n <th className="px-6 py-4 text-lg font-semibold text-center"> </th>\n </tr>\n </thead>\n <tbody …推荐指数
解决办法
查看次数
溢出和分解文本的问题
我使用顺风溢出，用于右侧的水平滚动。我的代码的以下示例：
<div className="bg-red-300">
<div className="bg-red-400">
<div className="container mx-auto pl-3 pr-3 pt-6 pb-6 flex space-x-2 overflow-x-auto">
<div className="flex space-x-2">
<div>Explore:</div>
<div className="font-bold underline">Shoes</div>
<div className="font-bold underline">Clothing</div>
<div className="font-bold underline">Accessories</div>
<div className="font-bold underline">Premium</div>
<div className="font-bold underline">Sport</div>
<div className="font-bold underline">Shop All</div>
</div>
</div>
</div>
</div>
#1 为什么当屏幕是移动时，“Shop All”这个词就被破坏了？怎么修好呢？
#2 如何隐藏顺风滚动？
推荐指数
解决办法
查看次数
tailwind.config.js 文件未生成
我在 next.js 项目上安装了 tailwindcss，但找不到 tailwind.config.js 文件。这是我用来安装的命令
npm install -D tailwindcss postcss autoprefixer
请我需要帮助
推荐指数
解决办法
查看次数
如何在 Tailwind 中按类名选择特定子项
如何在 Tailwind 中通过 className 选择特定的子项？
我尝试了一些选择器，但似乎没有任何匹配，这可能吗？
<div className="[CHILD_CLASSNAME]:bg-red [NESTED_CHILD_CLASSNAME]:bg-blue">
<div className="CHILD_CLASSNAME">
text in red
<div className="NESTED_CHILD_CLASSNAME">text in blue</div>
</div>
<div>
注意：我无法使用 CHILD_CLASSNAME 直接设置子组件的样式
推荐指数
解决办法
查看次数
如果样式是在组件级别完成的，为什么 nativewind 样式不起作用？
如果样式是在 App.Js 中完成的，则使用Nativewind 的React-native 样式效果很好。像这儿：
<NavigationContainer>
<View>
<Text className = "text-red-500">Hello</Text>
</View>
</NavigationContainer>
但如果样式是在组件级别完成的，那么它就不再起作用了。
return (
<NavigationContainer>
<HomeScreen/>
</NavigationContainer>
);
主屏幕组件：
import { View, Text } from 'react-native'
import React from 'react'
const HomeScreen = () => {
return (
<View>
<Text className = "text-red-500">Hello</Text>
</View>
)
}
export default HomeScreen
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
标签 统计
tailwind-css ×10
css ×2
reactjs ×2
inline ×1
javascript ×1
laravel ×1
laravel-9 ×1
next.js ×1
react-native ×1
svelte ×1
vite ×1
vue.js ×1
windows ×1
word-wrap ×1