如何使用tailwind css设置tippy.js的样式？答案

【问题标题】：How to style tippy.js with tailwind css?如何使用tailwind css设置tippy.js的样式？
【发布时间】：2022-06-19 15:42:37
【问题描述】：

我正在将tippy.js 与alpine js 一起使用，但不知道如何编辑它的样式。

我在 app.css 中为 laravel 项目尝试解决方案时，我看到了这个线程 tippy.js tooltips not responding to css styling，但似乎不起作用

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://unpkg.com/tippy.js@6/dist/tippy.css');
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer components {

    /* Customizing Tooltip Design */
    .tippy-box {
        background-color: #171E33;
        color: black;
        border: 1px solid #ededed;
        border-radius: 0;
      }
    ...

即使使用显示类名的文档 https://atomiks.github.io/tippyjs/v5/themes/

<div class="tippy-popper">
  <div class="tippy-tooltip" data-placement="top">
    <div class="tippy-content">
      My content
    </div>
  </div>
</div>

我试图直接定位它只是为了改变任何东西，但没有运气。

.tippy-content {
        background-color: tomato;
        color: yellow;
      }

我真的不知道它是如何工作的，如果我能解决这个问题，我会很感激任何帮助或指导。

【问题讨论】：

标签： tailwind-css alpine.js tippyjs

【解决方案1】：

您使用的是 tippy.js v6，但正在阅读 v5 的文档。在 v6 中，我们需要使用 data-theme attribute for a custom theme。让我们调用我们的自定义主题voyager。我们为tippy.js目标设置它：

tippy(targets, {
  theme: 'voyager',
});

在 CSS 文件中，重要的是我们不要将自定义样式放在 @layer components {} 中，因为 TailwindCSS 将 detect them as unused styles 并且不会将它们包含在编译后的 CSS 文件中。

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://unpkg.com/tippy.js@6/dist/tippy.css');
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Customizing Tooltip Design 
  TailwindCSS will always include this! */
.tippy-box[data-theme~='voyager'] {
  background-color: #171E33;
  color: red;
  border: 1px solid #ededed;
  border-radius: 0;
}


@layer components {
   /* Normal TailwindCSS components */
}

【讨论】：

【解决方案2】：

您需要覆盖某些类。这里适合我的解决方案，注意暗模式修饰符：


.tippy-box[data-theme~='light'] {
    @apply dark:bg-red-200;
}

.tippy-box[data-theme~='light'][data-placement^='top'] > .tippy-arrow::before {
    @apply dark:border-t-green-200;
}

.tippy-box[data-theme~='light'][data-placement^='left'] > .tippy-arrow::before {
    @apply dark:border-l-green-200;
}

.tippy-box[data-theme~='light'][data-placement^='right'] > .tippy-arrow::before {
    @apply dark:border-r-green-200;
}

.tippy-box[data-theme~='light'][data-placement^='bottom'] > .tippy-arrow::before {
    @apply dark:border-b-green-200;
}

我已经编写了一篇关于此的快速文章以获取更多信息：https://heydarmen.com/blog/styling-tippy.js-with-tailwind-css-including-dark-mode.html

【讨论】：