Question

我的问题似乎很奇怪……我实际上是在使用Nuxt.js和TailwindCSS作为UI框架的项目。因为这是我与Tailwind合作的第一个项目，所以我并不十分了解所有技巧。

我的网站有两个不同的主题：明暗模式。我创建了一个文件@/assets/themes.css来定义这些主题的所有样式，并将该文件添加到我的nuxt.config.js中，如下所示。

/* assets/themes.css */

:root {
  --color: #243746;
  --color-primary: #158876;
  --color-secondary: #0e2233;
  --bg: #f3f5f4;
  --bg-secondary: #fff;
}

.dark-mode {
  --color: #ebf4f1;
  --color-primary: #41b38a;
  --color-secondary: #fdf9f3;
  --bg: #091a28;
  --bg-secondary: #071521;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: var(--bg);
  color: var(--color);
}

a {
  color: var(--color-primary);
}

a:hover {
  text-decoration: underline;
}

button {
  @apply font-bold;
  @apply py-2;
  @apply px-4;
  @apply rounded;
  @apply inline-flex;
  @apply items-center;
}

button:hover {
  background-color: var(--color-secondary);
}

// nuxt.config.js

export default {
  css: [
    '@/assets/themes.css'
  ],

  buildModules: [
    '@nuxtjs/tailwindcss'
  ],

}

如您所见，我在同一样式表中同时使用了经典CSS和Tailwind属性。

我还切开了button和button:hover，而不仅仅是在@apply hover:bg-gray-800下使用了Tailwind的button。

最后，我还在tailwind.config.js中声明了主题颜色，以快速将其作为类直接用于HTML，但这是我其他样式表的重复。在这里看起来像我的tailwind.config.js。

// tailwind.config.js

module.exports = {
  
  theme: {
    extend: {
      colors: {
        light: {
          primary: "#158876",
          secondary: "#0e2233",
        },
        dark: {
          primary: "#41b38a",
          secondary: "#fdf9f3",
        }
      }
    },
  },
}

一切正常，但是我敢肯定这不是常规的方式。您可以针对以下问题给我一些建议吗？

将具有Tailwind prebuild属性的一些经典CSS合并到同一样式表文件中是一件好事吗？
我怎样才能只声明一次它们的颜色以便在主题样式表和预构建的Tailwind属性中简单地使用它？

如何使用Nuxt.js使用外部样式表正确配置TailwindCSS？

0 个答案: