Svelte、Typescript、TailwindCSS 暗模式支持答案

【问题标题】：Svelte, Typescript, TailwindCSS dark mode supportSvelte、Typescript、TailwindCSS 暗模式支持
【发布时间】：2021-07-21 01:47:51
【问题描述】：

我正在开发一个 Svelte3 项目，试图获得 TailwindCSS DarkMode 支持。从我读过的文档来看，它应该在本地工作吗？目前这是一个非常样板的 Svelte 项目，配置了 Tailwind、Typescript 和 PostCSS。 Tailwind 类在大多数情况下都在工作，但是，暗模式类不是……我似乎无法正确配置……有人可以帮我吗？

index.html

<!DOCTYPE html>
<html lang="en" class="dark">

<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width,initial-scale=1'>

  <title>Svelte app</title>

  <link rel='icon' type='image/png' href='/favicon.png'>
  <link rel='stylesheet' href='/global.css'>
  <link rel='stylesheet' href='/build/bundle.css'>
  <!-- Paste me in public/index.html -->
  <link rel='stylesheet' href='/index.css'>

  <script defer src='/build/bundle.js'></script>
</head>

<body class="dark">
</body>

</html>

tailwind.config.js

module.exports = {
  darkMode: 'class',
  purge: ["./src/**/*.svelte", "./src/**/*.html"],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

rollup.config.js

export default {
  input: 'src/main.ts',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/build/bundle.js'
  },
  plugins: [
    svg({
      stringify: true
    }),
    svelte({
      dev: !production,
      hydratable: true,
      preprocess: sveltePreprocess({
        sourceMap: !production,
        defaults: {
          style: "postcss",
        },
        postcss: {
          plugins: [
            require("tailwindcss"),
            require("autoprefixer"),
          ],
        },
      }),
      css: css => {
        css.write('public/build/bundle.css');
      }
    }),
    resolve({
      browser: true,
      dedupe: ['svelte']
    }),
    commonjs(),
    typescript({ sourceMap: !production }),
    !production && serve(),
    !production && livereload('public'),
    production && terser()
  ],
  watch: {
    clearScreen: false
  }
};

postcss.config.js

module.exports = ({
  plugins: [
    require("tailwindcss"),
    require("autoprefixer")
  ],
})

tsconfig.js

{
  "extends": "@tsconfig/svelte/tsconfig.json",

  "include": ["src/**/*"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
}

【问题讨论】：

您是否有示例说明如何在组件中使用深色变体？
@JHeth 使用 Tailwinds 示例，类似于：<div class="bg-gray-100 dark:bg-black">...</div>
这是正确的用法。您是否尝试过在组件中应用“暗”类？在 HTML 文件中应用它可能不会被采纳。一个简单的测试是将一个带有深色变体的 div 包装在一个带有深色类的 div 中。将黑暗课程列入安全名单也可能会有所帮助。

标签： typescript svelte tailwind-css darkmode

【解决方案1】：

您应该为此使用顺风的 JIT 模式。因为tailwind 会生成dark: 类的每个变体，所以生成的文件会很大。使用 JIT 编译生成的文件与生产中的文件相同

// tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: [ ... ],
  ...
}

这是相对较新的添加，所以构建工具还没有赶上。您必须单独运行 tailwind build，编译新的 CSS 文件，然后将该文件包含到您的 Svelte 构建中。

https://tailwindcss.com/docs/just-in-time-mode

【讨论】：