0

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

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/*"],
}
4

1 回答 1

0

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

// tailwind.config.js

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

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

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

于 2021-06-27T15:27:25.843 回答