标签: tailwind-css

因此，我正在使用 laravel 和 tailwind 创建一个项目。使用 paginate() 方法后，然后在视图中使用此代码

@if ($posts->count())
                @foreach ($posts as $post)
                    <div class="mb-4">
                        <a class="font-bold" href="">{{ $post->user->name }}</a> <span
                            class="text-gray-600 text-sm">{{ $post->created_at->diffForHumans() }}</span>

                        <p class="mb-2">{{ $post->description }}</p>
                    </div>

                @endforeach
                {{ $posts->links() }} (this line to create the link to other pages is not working properly)
            @else
                <p>There are no posts</p>
            @endif 

分页设计有点奇怪。转到下一页和上一页可以正常工作。

我遇到了 BetterDev 侧边栏，如果我们向其中添加内容，侧边栏也会滚动。有没有办法让侧边栏固定且不可滚动？我尝试了sticky，用top-0和left-0修正，但是没有用。

• 不存在内容时的图像
• 内容存在时的图像

    <div class="relative min-h-screen md:flex">
    
      <!-- mobile menu bar -->
      <div class="bg-gray-800 text-gray-100 flex justify-between md:hidden">
        <!-- logo -->
        <a href="#" class="block p-4 text-white font-bold">Better Dev</a>
    
        <!-- mobile menu button -->
        <button class="mobile-menu-button p-4 focus:outline-none focus:bg-gray-700">
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    
      <!-- sidebar -->
      <div class="sidebar bg-blue-800 text-blue-100 w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 …

我正在尝试在 React 项目中使用 Tailwindcss，在其中复制星球大战网站移动菜单。但是，当导航抽屉打开时，我添加到汉堡包图标段的框阴影不会显示。

沙箱链接：https://play.tai​​lwindcss.com/upmiAWTcso

索引.js：

const toggleDrawer = (event) => {
  document.querySelector("#drawer").classList.toggle("left-[-100%]");
  document.querySelector("#drawer").classList.toggle("left-0");
  document.querySelector("#bar-1").classList.toggle("hidden");
  document.querySelector("#bar-2").classList.toggle("active-2");
  document.querySelector("#bar-3").classList.toggle("active-3");
};

<div
  onClick={toggleDrawer}
  className="h-full flex flex-col justify-center items-center space-y-[8px]"
>
  <span
    id="bar-1"
    className="block h-[2px] w-[30px] border-zinc-500 border-l-[4px] border-r-[20px] rounded-full transition-all duration-300"
  ></span>
  <span
    id="bar-2"
    className="block h-[2px] w-[30px] border-zinc-500 shadow-md border-l-[20px] border-r-[4px] rounded-full origin-bottom-right transition-all duration-300"
  ></span>
  <span
    id="bar-3"
    className="block h-[2px] w-[30px] border-zinc-500 shadow-md border-l-[4px] border-r-[20px] rounded-full origin-bottom-left transition-all duration-300"
  ></span>
</div>;

全局.css：

@layer components {
  .active-2 {
    @apply …

我有一个带有 Tailwind 的 Rails 7 应用程序，我正在做这样的事情：

@list = [{name: "Some", width: "3/12"}, {name: "other", width: "6/12"}]

# In the view
<%= render 'mypartial': list: @list %>

# In the partial
<% list.each do |item|%>
  <div class="w-<%= item[:width] %>">
    <%= item[:name] %>
  </div>
<% end %>

该视图生成正确的 HTML ( ex: <div class="w-6/12">)，但浏览器无法识别这些类。如果我对它们进行硬编码而不传递变量，则一切正常。我做错了什么或者错过了什么吗？

我有一个父 div，里面有一个子图像元素。当我将鼠标悬停在父 div 上时，我希望子元素的 src 更改为不同的源。但我正在努力寻找一种方法来顺风做到这一点。

    <button className="flex flex-col items-center justify-center w-40 h-40 mx-12 transition ease-in-out rounded-full shrink-0 text-primary hover:text-white hover:bg-light">
        <div className="relative flex items-center justify-center w-20 h-20 mb-2">
            <Image src={icon} alt={`${title} icon`} />
        </div>
        <span className="text-xl text-center">{title}</span>
    </button>

悬停时图像应变成白色（不同来源）。如何使用 Tailwind 做到这一点？

我正在尝试使用 TailwindCSS 创建一个粘性标题，但似乎无法使其工作。

我已经阅读了文档，似乎我只需要添加sticky top-0到我的 div 中即可使其具有粘性，但它不起作用。

为了可读性，我已尽力清理我的代码，但如果您对整个代码感兴趣，您可以在这里找到它。

import { Logo, ToolbarButton, IconLink, Countdown } from "@lib/atoms";
import { faWhatsapp, faFacebook } from "@fortawesome/free-brands-svg-icons";
import {
  faHandHoldingHeart,
  faHeadphonesAlt,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export const Toolbar = () => {

  return (
    <div className="flex flex-col drop-shadow-2xl">

      <div className="h-16 flex items-center justify-center bg-rs-secondary">
        <div className="container flex justify-between">
          <div className="flex gap-4 items-center">
            <IconLink
              icon={faFacebook}
              href="https://www.facebook.com/estereo.sulamita"
            />
            <IconLink icon={faWhatsapp} href="https://wa.link/logvtp" />
          </div>
          <Countdown /> …

我有一个菜单，当屏幕较小时（比如在 SM 之前），我希望将其定位在屏幕左侧，而当屏幕较大时，将其定位在屏幕右侧。

<MenuItems
  class="
    absolute left-2 top-24 w-full mt-8
    sm:right-2 sm:top-0 sm:w-max
  "
>

单独应用时，设置right-*可按预期工作，但以断点为前缀时sm left-*优先。

这是一种在大屏幕上取消左键的方法吗？喜欢sm:left-none

我的行为与顺风任意值功能确实不一致，特别是与转换延迟属性有关。当我直接在任意值中使用任何随机值时，它适用于我迄今为止测试过的每个值（随机正整数）。前任...

<li className="delay-[2455]">{some text}</li>

但如果我要使用变量，该类只会偶尔根据值产生任何影响，看似随机。前任...

const delay = "250ms";
return <li className={`delay-[${delay}]}`></li>

上面的这段将产生一个有效的类，但下面的段将没有效果并且不会产生有效的类

const delay = "500ms";
return <li className={`delay-[${delay}]}`></li>

我不确定这是否是我做错了，或者是顺风中的一些奇怪的怪癖。我对任何建议持开放态度。如果有什么不同的话，我将打字稿与反应结合使用。我正在使用 tailwindcss 版本 3.0.11 和 postcss 版本 8.4.5 这些是我的 tailwind.config.js 和 postcss.config.js 文件

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}",],
  theme: {
    extend: {
      screens: {
        '3xl': '1920px',
        'xsm': '428px',
        '2xsm': '360'
      },
      fontFamily: {
        title: ['Patrick Hand'],
        body: ['Balsamiq Sans']
      },
      transitionProperty: {
        'opacity': 'opacity',
      },
    },
  },
  plugins: [],
}

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }, …

我想知道为什么顺风管理模板不起作用，后来我发现我的 app.css 中不存在某些类。

我按照https://tailwindcss.com/docs/guides/laravel中的安装进行操作。

这些是我的 app.css 中的类。

为什么有些类不存在于 app.css 中？例如：bg-gray-800、w-full、h-20 等。

/*
! tailwindcss v3.0.22 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. …

这是一个典型的tailwind.config.js文件：

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

由于我们正在创建一个基础架构，因此我们希望将此文件拆分为两个配置文件，并在 nextjs 构建之前重新加入/重新编译它们。

例如，我们希望tailwind.config.base.js它是集中的并包含：

  content: [
    "./pages/**/*.js",
    "./components/**/*.js",
    "./base/**/*.js",
    "./contents/**/*.js",
    "./modules/**/*.js"
    // Here we have a chance to centralize our directory structure
    // We can also prevent common mistakes
    // And we can ensure that all projects use js and not typescript
  ],
  plugins: [
    require('@tailwindcss/typography')
    // Here we have the chance to give all of our projects a …