标签: tailwind-css

Tailwind/LaravelMix - 手表上的无限循环

问题是当我npm run watch在控制台中不断循环运行时。我的CPU会爆炸。我发现问题出在 tailwind.config.js 文件中。

purge: [
    '**/*.+(html|php)',
    'partials/*.+(html|php)',
    '*.php',
    '*.html'
  ],

Run Code Online (Sandbox Code Playgroud)

问题出在这些路径上，因此出于某种原因，该路径对于以文件夹名称部分开头的路径工作正常，其他 3 个路径有问题。如果我设置以父文件夹名称开始，则无法观看这些文件并且我的 Tailwind 坏了

https://i.stack.imgur.com/nNUme.jpg

TAILWIND tailwind.config.js

module.exports = {
  purge: [
    '**/*.+(html|php)',
    'partials/*.+(html|php)',
    '*.php',
    '*.html'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    colors: {
      primary: '#15192B',
      secondary: '#2EAEE4',
      neutral: '#436576',
      white: '#fff',
      black: '#000'
    }
  },
  variants: {
    extend: {},
  },
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.container': {
          maxWidth: '100%',
          
          '@screen sm': {
            maxWidth: '640px',
          }, …

Run Code Online (Sandbox Code Playgroud)

laravel-mix tailwind-css

作者

lucky-day

0
推荐指数

1
解决办法

1299
查看次数

尝试将悬停：应用于我制作的 Tailwind CSS 自定义类，但它似乎不起作用

例子：

.btn {bg-blue-500 text-2 text-orange-300}
.btn2 {bg-orange-500 text-2 text-blue-300}

Run Code Online (Sandbox Code Playgroud)

尝试过：

编辑：很抱歉我忘记包含我正在使用的代码......那是深夜。

< button className="btn hover:btn2"/>   <---this does not work btn2 does not actually get applied as a hover

Run Code Online (Sandbox Code Playgroud)

btn当然会出现，但是悬停时，btn2样式不会出现。

如果我做了一些愚蠢的事情或者我明显错过了文档中已经说明的内容，请随时为我指出方向。

我尝试过搜索，但我在兜圈子，我只是有很多样式，我想通过在不同的状态下应用它们来改变功能，但这将是一个痛苦，因为我必须创建一个单独的.btn .btn2 btn2-hover btn-hover等。。 ETC..

是变体问题吗？css或者它是一个按一定顺序读取的过程？难道我期望将悬停应用于所有内部，css而实际上并没有这样做？或者我需要做出一些例外吗？我很混乱。

css hover next.js tailwind-css

ASG*_*SG4

2022 03-24

0
推荐指数

1
解决办法

5920
查看次数

有没有办法将输入类型“文件”单击图标

有没有什么方法可以将 input type='file' 放在 svg Icon 上，我在下面的代码示例中已经有了下载。我正在使用 Tailwind CSS。

 <td click.delegate="getTenantAgentLicence(agent.agentId)" class="p-6 pb-10 text-left block md:table-cell">
    <!-- <input type="file"/> -->
 <span class="inline-block md:hidden font-bold">Download</span>
    <a class="ml-2 cursor-pointer">
      <img class="h-6 w-6" src="/images/download1.svg">
    </a>
 </td>

Run Code Online (Sandbox Code Playgroud)

icons svg input tailwind-css

lem*_*voj

2022 04-26

0
推荐指数

1
解决办法

2358
查看次数

Fontawesome 图标采用不同的宽度

我正在使用 Tailwind CSS 和 Font Awesome Icons。这里的图标显示如下，

是不是不适合调整每个div的宽度。这是我的代码（对于一个元素），

<!-- Navigation Link-->
        <div class="w-100 p-3 hover:bg-white/30">
          <div class="flex gap-4 text-white-max pl-3">
            <div>
              <i class="fas fa-tags"></i>
            </div>
            <div>Products</div>
          </div>
        </div>
<!-- End Navigation Link-->

Run Code Online (Sandbox Code Playgroud)

我的问题是如何在不改变每个元素的情况下进行调整。

css font-awesome font-awesome-5 tailwind-css font-awesome-6

Mis*_*ana

2022 07-17

0
推荐指数

2
解决办法

592
查看次数

Tailwind CSS 站点未显示响应式版本

当我在 Chrome 中查看此站点并使用开发工具查看移动站点时，它正确显示为 1 列，但从 iPhone 查看时仍为 2 列？

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body class="h-full font-proza">
<div class="container mx-auto flex justify-center">
    <div class="w-2/3">
        <!-- Two columns -->
        <div class="flex mb-4 flex-wrap md:flex-no-wrap">
            <div class="w-full md:w-1/2 md:mr-10 mr-0">
                Left Text
            </div>
            <div class="w-full md:w-1/2 mt-10 md:mt-0">
                Some Text
            </div>
        </div>

    </div>
</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

css tailwind-css

And*_*ope

2019 02-27

-4
推荐指数

1
解决办法

4089
查看次数