Svelte、Typescript、TailwindCSS 暗模式支持
Posted
技术标签:
【中文标题】Svelte、Typescript、TailwindCSS 暗模式支持【英文标题】：Svelte, Typescript, TailwindCSS dark mode support 【发布时间】：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 中。将黑暗课程列入安全名单也可能会有所帮助。
【参考方案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
【讨论】：
以上是关于Svelte、Typescript、TailwindCSS 暗模式支持的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Typescript 文件中导入 Svelte 组件？
Typescript + Svelte - 如何添加类型以传播组件道具
Svelte + Typescript = 如何使错误消失？
【Svelte】官方Typescript支持+ TailwindCSS + SCSS