标签: tailwind-css
将输入字段文件隐藏在图像后面
file input我正在尝试在头像后面放置一个字段。单击头像时，用户应该能够选择图像。它工作得很好，但是我如何隐藏输入字段（请参阅代码片段）。当我添加visible: hidden它时，它消失了，但显然它不再可点击。
我该如何解决这个问题？我正在使用TailwindCss：
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex items-center cursor-pointer justify-center relative w-16 h-16 rounded-full border-2 border-brand-100">
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" width="50px" height="50px"><g><g><g><path d="M28,6h-4l-4-4h-8.001L8,6H4c0,0-4,0-4,4v12c0,4,4,4,4,4s5.662,0,11.518,0 c1.614,2.411,4.361,3.999,7.482,4c3.875-0.002,7.167-2.454,8.436-5.889C31.995,23.076,32,22,32,22s0-8,0-12S28,6,28,6z M14.033,21.66C11.686,20.848,10,18.626,10,16c0-3.312,2.684-6,6-6c1.914,0,3.607,0.908,4.706,2.306 C16.848,13.321,14,16.822,14,21C14,21.223,14.018,21.441,14.033,21.66z M23,27.883c-3.801-0.009-6.876-3.084-6.885-6.883 c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885C29.874,24.799,26.799,27.874,23,27.883z" data-original="#010002" class="active-path" data-old_color="##565A5" fill="#565A5C"/><polygon points="24.002,16 22,16 22,20 18,20 18,22 22,22 22,26 24.002,26 24.002,22 28,22 28,20 24.002,20 " data-original="#010002" class="active-path" data-old_color="##565A5" fill="#565A5C"/></g></g></g> </svg>
</div>
<input id="file"
class="absolute w-full h-full"
ref="file"
type="file"
accept="image/*"/>
</div> …推荐指数
解决办法
查看次数
将多个类绑定到单个变量
在使用 Tailwind 和实用程序优先的 css 方法时，我经常发现需要将多个类绑定到单个变量。
例如，要设置输入表单的样式，如果出现错误，我需要添加border-red、等。color-red
在 Vue 中是否有一种漂亮而优雅的方式来表达这一点而不是编写v-bind:class="{ 'border-red': error, 'text-red': error }？
推荐指数
解决办法
查看次数
使用 Tailwind 获取拉伸全屏的按钮
我试图让按钮顺风延伸到屏幕上，但要么它们向左对齐并且不延伸（大多数情况下），要么 - 正如代码的当前状态，它们似乎从右手延伸屏幕的一侧！
我确信我错过了一些明显的东西，但看不出它是什么。我的页眉和页脚适当拉伸，最初我只是复制它们，但作为buttons，而不是divs。
代码（超出屏幕版本）目前如下所示：
<body>
...
<div class="">
<div class="block">
<ul class="">
<li><button class="w-full bg-orange-200 hover:bg-orange-400 rounded-lg mx-6 my-4">
<div class="text-black text-lg content-center">
<h2 class="font-bold">Mike's big adventure</h2><br>
<div class="text-black text-base">Aargh, zombies!</div>
<div class="text-gray-600 text-xs">
<div>Created: 2020-03-24T12:57:01.753Z</div>
<div>Updated: 2020-03-24T13:00:06.411Z</div>
</div>
</div>
</button></li>
... more list items
</ul>
</div>
</div>
...
（注意，不要认为这有什么区别，但 html 实际上是由 Elm SPA 生成的）
我需要如何嵌套各种container、w-full、等w-screen，button以及我需要什么组合才能得到我想要的东西？
编辑：这个片段并不是唯一没有拉伸的东西。例如，页眉也没有。页脚附着在屏幕底部，但一直延伸......
标题：
<div class="container flex-auto w-screen m-2">
<div class="w-full content-center bg-orange-500 …推荐指数
解决办法
查看次数
为什么使用 Tailwind 与使用 npm-run-all 的 Create React App 一起使用会导致初始空白屏幕？
我正在尝试将 Tailwind 合并到我的 React 应用程序中。所以我按照此处概述的步骤进行操作https://daveceddia.com/tailwind-create-react-app/
当我启动我的应用程序（新创建的演示应用程序）时，它会加载一个空白屏幕。刷新页面后，一切正常。我很困惑为什么初始屏幕是空白页。任何帮助或解释将不胜感激。
现在，如果我在不观看的情况下构建 tailwindcss，那么 React 应用程序会加载正确的 css，但是热重载不适用于 tailwindcss，而且我不会观看它的更改，因此生成的 css 不会更改。
如果我使用 npm-run-all 运行 React 应用程序和 postcss watch 脚本，我最初会看到空白屏幕，如上所述。
如果我使用 npm-run-all 运行 React 应用程序和 postcss watch scrip 并且不包含 tailwind. generated.css 文件，我的 React 应用程序可以正常运行和加载，但我不再有 tailwind css 了。
似乎只有当我包含顺风实用程序时它才会这样做
@tailwind utilities;
推荐指数
解决办法
查看次数
TailwindCSS / AlpineJS 中的下拉菜单
有谁知道如何在 TailwindCSS /AlpineJS 中构建“下拉菜单”？我知道如何构建下拉菜单，但无法制作下拉菜单。
我的下拉菜单：
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta charset="utf-8" />
<div class="flex-shrink-0 flex border-t border-gray-200 p-4">
<a href="#" class="flex-shrink-0 group block">
<div class="flex items-center">
<div @click.away="open = false" class="relative" x-data="{ open: false }">
<div>
<button @click="open = !open" class="max-w-xs flex items-center text-sm rounded-full text-white focus:outline-none focus:shadow-solid transition ease-in-out duration-150">
<img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="ml-3">
<p class="text-sm leading-5 font-medium text-gray-700 group-hover:text-gray-900">
John Doe
</p>
<p class="text-xs text-left …推荐指数
解决办法
查看次数
操作文本 (Trix) 样式无法在生产环境中加载（Rails 6、Heroku）
由于某种原因，我正在努力制作动作文本（Trix 编辑器）图标栏以在生产环境（Heroku）中加载。我正在使用 Rails 6 和 TailwindCSS 构建一个相对简单的 Web 应用程序。操作文本在本地和生产中都具有完整的功能，但是虽然样式按预期加载到我的本地计算机上，但我无法使其在生产中工作。
本地主机：
生产：
应用程序/javascript/stylesheets/application.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'trix/dist/trix.css';
@import "components/actiontext";
/*! purgecss start ignore */
@import "components/buttons";
@import "components/forms";
/*! purgecss end ignore */
应用程序/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("trix")
require("@rails/actiontext")
import "stylesheets/application"
import "controllers"
应用程序/javascript/stylesheets/components/actiontext.scss
@import "trix/dist/trix.css";
// trix-toolbar {
// .trix-button {
// @apply bg-white border-0;
// }
// .trix-button-group {
// border: 0;
// }
// .trix-button--icon-bold {
// @apply rounded-tl rounded-bl;
// }
// …推荐指数
解决办法
查看次数
带有 @nguniversal 的 Angular SSR 和用于 PostCSS 支持的自定义 webpack
我的 Angular 10.2.1 应用程序使用自定义 webpack 构建器在 .scss 文件中提供 PostCSS 支持，在 SPA 模式下工作得非常好。
\n角度.json
\n "build": {\n "builder": "@angular-builders/custom-webpack:browser",\n "options": {\n "customWebpackConfig": {\n "path": "./webpack.config.js"\n },\nwebpack.config.js
\nlet plugins = [\n require(\'postcss-import\'),\n require(\'tailwindcss\'),\n require(\'autoprefixer\'),\n]\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.scss$/,\n loader: \'postcss-loader\',\n options: {\n ident: \'postcss\',\n syntax: \'postcss-scss\',\n plugins: () => plugins\n }\n }\n ]\n }\n};\n我决定按照官方文档添加 SSR 支持ng add @nguniversal/express-engine，但是当我尝试提供 SSR 版本时，出现错误：
ERROR in Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):\nSassError: expected …推荐指数
解决办法
查看次数
TailwindCSS：如何从网格右侧添加元素？
给定类名“grid grid-cols-5 gap-2 place-items-end”
我得到：
通缉：
有没有纯 CSS 的方法来解决这个问题？必须从 js 在 6h 星上设置“col-span-4”有点乏味（考虑到我可以获得的星数是未知的）。
推荐指数
解决办法
查看次数
我如何在 Vue 上使用 Sass 来使用 Tailwind
我想在 vue js 上使用 tailwind 和 sass，我正在关注 tailwind 文档，但仍然遇到此错误
这是我的依赖，postcss 是最新的
"dependencies": {
"autoprefixer": "^10.1.0",
"core-js": "^3.6.5",
"postcss": "^8.2.1",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^14.0.0",
"postcss-loader": "^4.1.0",
"postcss-preset-env": "^6.7.0",
"precss": "^4.0.0",
"tailwindcss": "^2.0.2",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
这是我的postcss.config.js
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
有什么解决办法吗？我如何在 vue js 上使用 tailwind 和 sass 预处理器？谢谢大家。
错误：PostCSS 插件 tailwindcss 需要 PostCSS 8
推荐指数
解决办法
查看次数
Vue js 上带有 props 的反应式 Tailwind 类
我尝试过在 vue js 上使用可重用的组件，例如传递 props 类名。就我而言，我使用的是 tailwind css。如何使用 props 传递类名？
这是我的代码
<template lang="pug">
router-link.button-filled(
:to="routeName"
:title="title"
:class="customClass"
)
| {{ title }}
</template>
<script>
export default {
props: {
routeName: { default: "/", type: String },
title: { default: "Button", type: String },
size: { default: "md", type: String },
backgroundColor: { default: "red-500", type: String },
borderColor: { default: "red-500", type: String }
},
computed: {
customClass() {
return [
"bg-" + this.backgroundColor,
"border-" + this.borderColor
];
}
} …推荐指数
解决办法
查看次数
标签 统计
tailwind-css ×10
javascript ×4
css ×3
vue.js ×3
html ×2
postcss ×2
webpack ×2
actiontext ×1
alpine.js ×1
angular ×1
grid ×1
layout ×1
reactjs ×1
right-align ×1
sass ×1