标签: tailwind-css
Tailwind.min.css 在我的 Nuxt 应用程序中覆盖 tailwind.css
每当我尝试配置 Tailwind，使其接受我的自定义字体时，它都会tailwind.css用tailwind.min.css. 因此，更改不会显示出来。
看，这些是我的文件。
// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
purge: [
'./components/**/*.{vue,js}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
sans: ['Rubik', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {},
},
plugins: [],
}
// nuxt.config.js
module.exports = {
...,
css: ["~assets/css/tailwind.css"],
...,
}
/*@/assets/css/tailwind.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: 'Rubik';
src: url(../fonts/Rubik-Light.ttf);
font-weight: 300; …推荐指数
解决办法
查看次数
Chakra-UI 删除默认背景颜色
我将 @chakra-ui/react 与 Tailwind CSS 和 NextJS 一起使用。black我已在文件中将背景颜色设置为globals.css：
body {
background-color: black;
}
但我没有看到黑色被应用，我只看到一个白色的屏幕。在我切换到脉轮之前，这是有效的，所以我想这与它有关。
这是我的 app.js 文件：
import { ChakraProvider } from '@chakra-ui/react'
import 'tailwindcss/tailwind.css'
import '../styles/globals.css' // file which sets the body's background-color to black
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
)
}
export default MyApp
我认为这是因为 chakra 的默认主题？我该如何禁用它？
推荐指数
解决办法
查看次数
无法通过html访问css文件
我正在尝试从 app.html 访问 main.css 以使 Tailwind CSS 工作，因为如果我将它放在 .svelte 文件自身的样式括号中，那么它只会给我一个错误，任何人都知道为什么
<link rel="stylesheet" href="./routes/main.css">
不起作用？
我尝试在其中访问 CSS 的 HTML
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<link rel="stylesheet" href="./routes/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
%svelte.head%
</head>
CSS 文件（如果需要对其执行任何操作）
<link rel="stylesheet" href="./routes/main.css">
推荐指数
解决办法
查看次数
隐藏在自定义断点上会破坏 Tailwind 中所有断点的显示值
这是 Tailwind 播放代码。
我的配置如下，注意自定义断点：
const colors = require("tailwindcss/colors");
module.exports = {
darkMode: "media", // or 'media' or 'class'
theme: {
extend: {
screens: {
xs: "320px", // here i have xs
},
colors: {
orange: colors.orange,
},
},
},
variants: {
extend: {},
},
plugins: [],
};
然后我有一些元素如下：
<div class="bg-gray-500 xs:hidden sm:hidden md:flex">
<h1>foo</h1>
</div>
我希望div显示在上面的屏幕上md，否则它应该被隐藏。
上面的代码的奇怪之处在于它完全适用于内置断点sm。例如，如果您xs:hidden在 Tailwind Play 中删除。你会看到我想要的行为。
不过，我也想包括在内xs:hidden。为什么会出现这种情况？
提前致谢。
环境
"postcss": "^7.0.39",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
与 React …
推荐指数
解决办法
查看次数
Tailwind CSS 具有弹性布局和截断文本
我在 flex 实用程序的帮助下使用 tailwind css 创建了一个页面布局。现在我正在努力解决一个问题。
右侧有一个标题部分，其中包含标题和说明。
我现在希望描述永远不会占用超过 100% 的宽度，并且如果有更多宽度，则会自动截断文本。
我准备了一个工作示例来演示我的问题：
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex bg-blue-100 h-screen">
<div class="bg-green-100 w-16 flex-none">A</div>
<div class="bg-blue-100 w-96 flex-none">SB</div>
<div class="bg-red-100 flex-auto">
<div class="flex flex-col">
<div class="flex flex-col space-y-2 bg-pink-100 p-3">
<h1 class="bg-yellow-100">Title</h1>
<h2 class="bg-yellow-200 truncate">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
</div>
<div class="bg-pink-200 p-3">...</div>
</div>
</div>
</div>如果有人可以帮助我解决这个问题，那就太好了。
提前谢谢了
凯
推荐指数
解决办法
查看次数
Tailwind 配置中“内容”的用途
我在 Nuxt 应用程序中使用 tailwind，并在 Tailwind CSS v3.0 中收到有关清除/内容选项更改的警告，并且在将清除更改为内容或保留它之后，因为它没有更改任何内容，甚至没有删除该警告。
据我了解，此选项（内容/清除）告诉 tailwind 在哪里搜索其类名。但即使该列表中没有任何选项，一切都正常。
有人可以解释为什么即使我的“内容”为空也没有任何变化吗？
tailwind.condig.js
module.exports = {
mode: 'jit',
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}",
],
// ...
}
推荐指数
解决办法
查看次数
TailwindCSS 输出 css 文件 424 行
我遵循有关使用 CLI 安装 Tailwind 的 Tailwind 文档，但 output.css 文件只有 424 行，而它应该有数千行。
推荐指数
解决办法
查看次数
如何使用 Tailwind CSS 在模式上显示下拉菜单
我正在使用 Tailwind CSS，我想在模式上显示白色下拉菜单。我尝试使用z-index但无法使其工作。
有任何想法吗？
这是我的模态代码：
<TransitionRoot as="template" :show="isOpen">
<Dialog as="div" class="inset-0 fixed overflow-y-auto">
<div class="flex min-h-screen text-center px-4 pt-4 pb-20 items-end justify-center sm:p-0 sm:block">
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
<DialogOverlay class="bg-gray-975 bg-opacity-85 inset-0 transition-opacity fixed" />
</TransitionChild>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:h-screen sm:inline-block sm:align-middle" aria-hidden="true">​</span>
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leave-from="opacity-100 translate-y-0 sm:scale-100" …推荐指数
解决办法
查看次数
为什么 Tailwind 的构建命令不起作用？
我是一个初学者，刚刚学习Tailwind，所以我做了一个项目并将其推送到GitHub。不幸的是，我添加style.css到了我的 gitignore 文件中，但它没有推送到 GitHub。Tailwind 在我的 HTML 文件和我的文件中工作src/style.css，并且这应该压缩为public/style.css. 我想这没问题。
我的硬盘上没有该项目，因此我从 GitHub 克隆了该存储库并尝试再次构建它，以自动创建文件style.css。但是，当我尝试使用下面的命令构建时，它会抛出此错误：
npm run build -p
出了什么问题，我现在应该做什么？
我的包文件：
npm run build -p
推荐指数
解决办法
查看次数
如何编写将调色板颜色作为可选参数的 Tailwind 类插件
我有这样的风格：
box-shadow: 0 0 0 100px white inset;
但我不想white硬编码 - 我想在我的tailwind.config.js调用中创建一个 Tailwind 插件bg-shadow，它接受颜色作为可选的第三个参数，如下所示：
<input class="bg-shadow" /> <!-- defaults to white -->
<input class="bg-shadow-primary-500" /> <!-- specify the colour -->
阅读了有关插件的 Tailwind 文档后，我对如何实现这一目标一无所知！
推荐指数
解决办法
查看次数
标签 统计
tailwind-css ×10
css ×5
vue.js ×3
html ×2
nuxt.js ×2
chakra-ui ×1
flexbox ×1
headless-ui ×1
javascript ×1
next.js ×1
svelte ×1
terminal ×1