标签: tailwind-css
将 tailwindcss 类转换为 vanilla css
是否有任何库可以接受 dom 元素并返回带有 vanilla css 的字符串，以便在 web 项目中使用？
const styles = TailwindToStyles('<div class="bg-teal-100 m-10">Lorem ipsum</div> ')
样式的结果是
.bg-teall-100 {
background-color: #e6fffa;
}
.m-10{
margin: 40px
}
格雷戈尔
推荐指数
解决办法
查看次数
Laravel 未知规则 @tailwindcss(unknownAtRules)
我安装了一个新的 Laravel 项目。我想使用 Tailwind CSS 并严格按照 Tailwind 网站的说明进行操作。当我运行时npm run dev，我的 resources/css/app.css 文件没有填充 Tailwind 规则，而且我仍然只有三个：
@tailwind base;
@tailwind components;
@tailwind utilities;
规则 @tailwindcss(unknownAtRules) 处有“未知”警告。我观看了一个视频，该视频中的人运行了 npm dev，并且 app.css 文件充满了由 Tailwind CSS 填充的规则。
这是我的资源目录结构
tailwind.config.js
module.exports = {
content: [
"./storage/framework/views/*.php",
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: { extend: {} },
plugins: [],
};
刀片/视图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add A Post</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
@yield('content')
</body>
</html> …推荐指数
解决办法
查看次数
如何使用 Tailwindcss、ReactJS 和 Typescript 设置 Storybook
如何设置 Storybook 以便它解析 Tailwindcss 样式并解析绝对路径？
注意：这是根据此允许的自记录问题/答案。这需要一段时间才能弄清楚，我相信很多其他人也会遇到这个问题。
推荐指数
解决办法
查看次数
Tailwind CSS 表不应用样式
我目前正在学习基本的 Laravel，并且已经安装了 laravel Breeze 入门套件。
当前正在尝试显示一个表格，但 tailwind CSS 未应用于该表格：
这是我从tailwind 文档中复制的代码：
<table class="table-auto">
<thead>
<tr>
<th>Song</th>
<th>Artist</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
<td>Malcolm Lockyer</td>
<td>1961</td>
</tr>
<tr>
<td>Witchy Woman</td>
<td>The Eagles</td>
<td>1972</td>
</tr>
<tr>
<td>Shining Star</td>
<td>Earth, Wind, and Fire</td>
<td>1975</td>
</tr>
</tbody>
</table>
我已将代码插入到刀片文件中，如下所示：
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Cases') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 …推荐指数
解决办法
查看次数
如何使用 TailwindCSS 淡入淡出文本背景颜色而不触发悬停或其他状态更改？
当有条件地出现新文本时，我想用临时的琥珀色背景来引起注意，该背景在出现后 300 毫秒变为透明（类似于 Stack Overflow 的做法）。
有条件地出现文本时的屏幕截图：
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
这就是 300 毫秒后我想要的（尽管文本未更改）：
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
谢谢你的帮助。
推荐指数
解决办法
查看次数
Tailwind 深色模式不适用于前缀，为什么？
在我使用前缀之前，我可以正常使用暗模式，但是在我的顺风类中添加前缀后，我不能再使用暗模式了，有人知道如何使用前缀切换暗模式吗？
推荐指数
解决办法
查看次数
Tailwind 和 Alpine.js 闪烁
如何修复 tailwind 和 alpine.js 上的闪烁问题？已经按照alpine.js添加了 x-cloak 。但还是没有修好。
如果页面加载时 x-show 的“默认”状态为“false”，您可能需要在页面上使用 x-cloak 来避免“页面闪烁”（当浏览器在 Alpine 之前渲染您的内容时发生的效果）完成初始化并隐藏它。）您可以在其文档中了解有关 x-cloak 的更多信息。
style.css（未编译）
@tailwind base;
@tailwind components;
@tailwind utilities;
[x-cloak] {
display: none !important;
}
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Site</title>
<link rel="stylesheet" href="css/style.css" />
<script src="js/alpine.js" defer></script>
</head>
<body class="bg-gray-50 font-sans flex flex-col min-h-screen">
<header class="sticky top-0 z-50">
<nav class="bg-white shadow">
<div x-data="{ isOpen: false }" @click.outside="isOpen = false"> …推荐指数
解决办法
查看次数
ReactJS：Tailwind 覆盖全局 CSS 内联
我有这个 Rails Reactjs 应用程序，如果我将此行放入表单中
<input type='submit'/>
它将为我创建一个蓝色按钮。我刚刚安装了 Tailwind，如果我用 tailwind 类输入这一行，它不会对按钮设计产生任何影响。
<input type='submit'
className='bg-red-500 text-white font-bold py-2 px-4 rounded-full'/>
有没有一种方法可以覆盖此全局设置，例如将 !important 内联放入 className 中？
任何帮助将不胜感激。
推荐指数
解决办法
查看次数
暗模式不适用于顺风无头 UI
深色模式可以在我的 React 应用程序中的任何地方工作，除了无头 ui 组合框。我将样式化的 h1 放在同一个组件中并应用dark:bg-red-200（以及任何其他样式）没有问题。组合框接受所有其他顺风实用程序，包括属性（hover:但不包括dark:属性）。
推荐指数
解决办法
查看次数
有没有办法将 Next.js 应用程序转换为 React Native 应用程序？
我一直在使用 Next.js 和 tailwindcss，并且喜欢这个组合。我已经制作了一个网络应用程序，还想制作一个 ios 和 android 版本。有没有办法将我现有的 Next.js 项目转换为移动应用程序，或者我是否必须从头开始制作 React Native 应用程序？Tailwindcss 在 React Native 上不如在 React.js 或 Next.js 上那么好，所以如果是这种情况，对于 React Native，有什么好的替代 tailwindcss 的方法呢？我最终想编写一件事并将其作为 Web、iOS 和 Android 版本。如果我想实现这一目标，这是否意味着我应该只使用 React Native 继续前进？
推荐指数
解决办法
查看次数
标签 统计
tailwind-css ×10
reactjs ×4
laravel ×2
alpine.js ×1
css ×1
darkmode ×1
headless-ui ×1
html ×1
javascript ×1
laravel-9 ×1
next.js ×1
prefix ×1
react-native ×1
storybook ×1
typescript ×1