标签: tailwind-css

如何使用 Tailwind CSS 删除输入类型 Number 上的箭头

我有一个数字类型的输入，我想删除默认情况下附带的增量/减量箭头。我如何使用 Tailwind CSS 做到这一点？我查了一下，但没有发现任何可以解决这个问题的方法。

\n input type="number" placeholder="Num\xc3\xa9ro de t\xc3\xa9l\xc3\xa9phone" className="border p-4 Outline-none"\n

css numbers input reactjs tailwind-css

Tyr*_*ron

2023 12-14

51
推荐指数

4
解决办法

7万
查看次数

focus:outline-none 无法在 Laravel 中使用 Tailwind CSS

我在 Laravel 应用程序中使用 Tailwind CSS，并且想要删除输入框上的焦点边框。根据文档，focus:outline-none应该实现这一点，尽管它对我不起作用并且边框仍然出现在焦点上。

看起来我瞄准了错误的目标，就好像我瞄准了错误的目标一样focus:outline-black，我可以看到黑色轮廓以及焦点上的标准蓝色轮廓。

focus:border-none也不能解决问题。

有任何想法吗？

<input class="text-input" placeholder="Your Name" />

.text-input {
    @apply focus:outline:none;
}

Run Code Online (Sandbox Code Playgroud)

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');

module.exports = {
    mode: 'jit',
    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },            
        },
        colors: {                      
            black: colors.black,
            white: colors.white,
            gray: colors.trueGray,
            indigo: colors.indigo,
            red: colors.rose,
            yellow: colors.amber,
            blue: colors.blue,
        },
    },

    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

Run Code Online (Sandbox Code Playgroud)

webpack.mix.js

const mix …

Run Code Online (Sandbox Code Playgroud)

css laravel tailwind-css

Tho*_*ead

2021 11-22

49
推荐指数

7
解决办法

11万
查看次数

强制 Tailwind 在构建阶段包含一些类

在我的 Angular 项目中，我最近将菜单从打字稿变量移动到从后端动态加载的 json。

一些 Tailwind 类仅在此菜单中使用，因此现在在构建时 Tailwind 不知道它必须包含这些类的样式。

是否可以强制 Tailwind 始终包含某些类？例如，通过处理 tailwind.config.js 文件。

作为解决方法，实际上我已将此行包含在我的 index.html 中（但我不喜欢 eslint 的错误）：

<!--<span class="hidden bg-green-400 bg-pink-400"></span>-->

Run Code Online (Sandbox Code Playgroud)

css user-interface angular tailwind-css

Gab*_*cas

2023 03-10

47
推荐指数

2
解决办法

2万
查看次数

如何在 TailwindCSS 中使元素在移动设备尺寸中不可见，但在笔记本电脑尺寸中可见

在 tailwind css 中，我们可以说lg:hidden隐藏 lg 尺寸屏幕中的元素。

在下面的示例中，我们没有指定屏幕尺寸，因此01对任何屏幕都完全隐藏。

<div class="flex ...">
  <div class="hidden ...">01</div>
  <div>02</div>
  <div>03</div>
</div>

Run Code Online (Sandbox Code Playgroud)

我想实现只显示lg尺寸元素但隐藏移动尺寸。然而，tailwind css断点是基于min width所以如果我们指定sm:hidden，例如，从768px开始的最小宽度都被隐藏。

有什么办法可以只显示特定屏幕尺寸的元素，但在 Tailwind CSS 中隐藏在该屏幕尺寸以下？

css tailwind-css

hus*_*sky

2023 09-14

46
推荐指数

5
解决办法

6万
查看次数

Tailwind CSS 类在我的项目中不起作用

这是我的 HTML 链接 https://play.tailwindcss.com/fbB4GCL0ht

Visual Studio Code 设置图片

Tailwind.Config.js

全部文件

warn - 在源文件中未检测到实用程序类。如果这是意外情况，请仔细检查contentTailwind CSS 配置中的选项。
警告 - https://tailwindcss.com/docs/content-configuration 在 320 毫秒内完成。

这显示了我的 Visual Studio Code 终端。我应该怎么办？我还添加了基本组件和实用程序。

css class tailwind-css

aya*_*ali

2023 12-04

43
推荐指数

6
解决办法

18万
查看次数

NextJS 具有固定宽度和自动高度的图像组件

我正在使用 NextJS 图像组件。我希望图像填充 100% 宽度并采用保持纵横比所需的高度。我已经尝试了此代码的许多不同变体，但除非我在父 div 上定义固定高度，否则它将无法工作。

export default function PhotoCard({ img }: Props) {
      return (
        <div className="relative w-full h-32 my-2">
          <Image alt={img.title} src={img.url} layout="fill" objectFit="cover" />
        </div>
      );
    }

Run Code Online (Sandbox Code Playgroud)

这是当前的行为

reactjs next.js tailwind-css nextjs-image

Jka*_*ram

2022 09-06

41
推荐指数

4
解决办法

5万
查看次数

Reactjs 中的规则 @tailwind CSS 未知

编译代码时无法解决此错误..！事实上我已经尝试了很多其他的实现方式

//索引.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Run Code Online (Sandbox Code Playgroud)

reactjs visual-studio-code react-dom tailwind-css

K S*_*han

lucky-day

41
推荐指数

1
解决办法

5万
查看次数

错误：补水时出现错误。由于错误发生在 Suspense 边界之外，因此整个根将切换到客户端渲染

我正在使用 Next.js 制作一个网站，每次都会显示上述错误。

不知道我的代码有什么问题。

const Login = () => {
  const [userMsg, setUserMsg] = useState("");
  const [email, setEmail] = useState("");
  const router=useRouter();

  const handleOnChangeEmail = (e) => {
    e.preventDefault();
    setUserMsg("");
    console.log("event", e);
    const email = e.target.value;
    setEmail(email);
  };
  const handleLoginWithEmail = (e) => {
    e.preventDefault();
    if (email) {
      if (IsEmail.validate(email)){
        router.push("/")
        
      }else{
        setUserMsg("Enter a valid email address")
      }
      
    } else {
      //show usermssg
      setUserMsg("Enter an email address");
    }
  };
  return (
    <div className="bg-[url('/static/bglg.jpg')] flex items-stretch flex-col h-screen w-full">
      <head>
        <title>NeoVest …

Run Code Online (Sandbox Code Playgroud)

javascript reactjs next.js tailwind-css

SOH*_*HAM

2022 06-06

37
推荐指数

1
解决办法

9万
查看次数

如何在使用 Tailwind 时更改滚动条 (next.js/react)

我正在使用 Tailwind (react/next) 并努力改变我的滚动条的外观。

这是一个单页应用程序，我一直在尝试创建自定义 CSS 以应用于索引文件中的第一个 div，如下所示：

<div className="no-scroll"> <<<<<<<--------- Adding custom css here
      <Head>
        <title>Oscar Ekstrand</title>
        <link rel="icon" href="/images/favicon.ico" />
    
      </Head>
      
      <main className="flex flex-col no-scroll">
        <section ref={heroref}>
          <Hero scrollToContacts={scrollToContacts} />
        </section>

        <section ref={offeringref}>
          <Offering />
        </section>
        <section ref={processref}>
          <WhatIDo />
        </section>

        <section ref={biographyref}>
          <CvBar />
        </section>
        <section ref={skillsetref}>
          <Skillset />
        </section>
      </main>
      <section ref={contactsref}>
        <Footer />
      </section>
    </div>

Run Code Online (Sandbox Code Playgroud)

我可以使用自定义 CSS 类来处理按钮等内容，既具有“插件方法”又具有全局样式表。（https://play.tailwindcss.com/zQftpiBCmf）

但我不明白如何改变滚动条的外观。

有人有主意吗？

css reactjs next.js tailwind-css

Osc*_*and

2021 10-01

35
推荐指数

4
解决办法

5万
查看次数

Tailwind 类安装后不工作

我尝试使用CSS，我只是使用npm安装tailwindcss，然后构建css并提供output.css。但是，当我在按钮中使用 bg-black 类进行测试时，它仍然无法正常工作。

我使用的构建命令 tailwindcss -i ./src/style.css -o ./dist/output.css将其放入 package.json 中的脚本中

目录文件路径：

在src/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Run Code Online (Sandbox Code Playgroud)

在tailwind.config.js

    theme: {
      extend: {
        // ...
      },
    },
    plugins: [],
  }

Run Code Online (Sandbox Code Playgroud)

在dist/index.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">
    <link rel="stylesheet" href="output.css">
    <title>Learn Tailwind</title>
</head>
<body>
    <div class="container">
        <button class="bg-black">Awesome</button>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

浏览器中的 HTML 结果：