Question

我正在处理 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/*"],
}

Answer 1

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

// tailwind.config.js

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

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

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

Svelte、Typescript、TailwindCSS 暗模式支持

1 个答案: