Svelte, Typescript, TailwindCSS dark mode support

Question

I'm working on a Svelte3 project, trying to get TailwindCSS DarkMode support. From the docs I've read, it should be working locally? It's a pretty boilerplate Svelte project at the moment, with Tailwind, Typescript and PostCSS configured. Tailwind classes are working, for the most part, However, dark mode classes are not... I can't seem to get the configuration correct.. Can someone help me out?

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

Do you have an example of how you're using the dark variants in a component? — JHeth, Apr 27 '21 at 21:00
@JHeth using Tailwinds examples, it would be something like: `
...
` — B-M, Apr 28 '21 at 15:41
That's correct usage. Have you tried applying the 'dark' class inside a component? Applying it in the HTML file may not be getting picked up. A simple test would be to wrap a div with dark variants in a div with the class dark. There is a chance safelisting the dark class may help as well. — JHeth, Apr 28 '21 at 19:02

score 0 · Answer 1 · answered Jun 27 '21 at 15:27

You should use JIT mode of tailwind for this. Because tailwind generates every variant of dark: class the resulting file would be huge. With JIT compilation the generated file is the same as in production

// tailwind.config.js

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

This is relatively new addition, so build tools didn't catch up yet. You have to run tailwind build separately, compile new CSS file, and then include that file into your Svelte build.

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

Svelte, Typescript, TailwindCSS dark mode support

1 Answers1