Astro + Svelte + Tailwind missing dark rules | Astro Lounge | Page 1

bright bronze Mar 15, 2023, 10:57 PM

#

Hi guys I have a weird issue with astro + tailwind + svelte , I have the following configuration:

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: 'class',
    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    theme: {
        extend: {},
    },
    plugins: [],
}

Layout.astro

....
....

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

Then inside my component.svelte i have the following styles

Component.svelte

<script>
</script>

<div>
Test Component
</div>

<style lang="postcss">
    div {
        @apply dark:bg-zinc-900 bg-slate-50;
    }
</style>

And finally index.astro

---
import Layout from "../layouts/Layout.astro";
import Component from "../components/Component.svelte";
---

<Layout title="Welcome to Astro.">
    <main>
        <Component />
    </main>
</Layout>

<style lang="postcss">
</style>

Now my issue is that dark mode doesn't work even if Layout use dark class inside html element, but it works if index.astro use dark class inside main tag.

Am I doing something wrong?

violet lichen Mar 15, 2023, 10:59 PM

#

It looks like you have the CSS for 'dark' scoped to the component only, and not the layout.

#

It'll work inside the <main> because you have the styling within Component.astro only, so Astro is going to scope the style to only be applied within Component.astro

#

You would need to add the styling to Layout.astro

bright bronze Mar 15, 2023, 11:03 PM

#

ok got it , it's a bit ugly add a stile for a component tag inside a Layout file there's no cleaner way to do it?

#

this is the only cleaner way i found so far https://www.npmjs.com/package/tailwindcss-global-dark

npm

tailwindcss-global-dark

A TailwindCSS variant for class-based dark mode with CSS modules. Latest version: 1.0.1, last published: a year ago. Start using tailwindcss-global-dark in your project by running npm i tailwindcss-global-dark. There is 1 other project in the npm registry using tailwindcss-global-dark.

violet lichen Mar 16, 2023, 5:40 PM

#

Is your 'dark' class going to be the same everywhere? i.e. will it use the same properties and colours?

If so, there are a couple of options. You could use is:global in Layout.astro

Example:

<style is:global>
  body a { color: red; }
</style>

I believe that should work for you!

Another option would be to write it in a css file that'll be imported into the Layout file

#Astro + Svelte + Tailwind missing dark rules