grand knoll
Hi all. I've started working with Astro for the first time and can't get Tailwind to generated dark mode CSS like I am expecting it to. Anyone know how I can get it to generate the css when I add new dark mode classes onto elements? I'm using Astroship theme to learn from.
https://github.com/surjithctly/astroship
astro.config.mjs
import tailwind from "@astrojs/tailwind";
import mdx from "@astrojs/mdx";
import sitemap from "@astrojs/sitemap";
import icon from "astro-icon";
// https://astro.build/config
export default defineConfig({
site: "https://astroship.web3templates.com",
integrations: [tailwind(), mdx(), sitemap(), icon()],
});
tailwind.config.cjs
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
darkMode: 'class', // Enable dark mode using a class
theme: {
extend: {
fontFamily: {
sans: [
"Bricolage Grotesque Variable",
"Inter Variable",
"Inter",
...defaultTheme.fontFamily.sans,
],
},
},
},
plugins: [require("@tailwindcss/typography")],
};```
\layouts\Layout.astro
```....
....
<!DOCTYPE html>
<html lang="en" class="dark">
....
....```
Then this is where I'm trying to change some link CSS for dark mode. I set some classes in the styles primary variable. They show up in the generated html as expected, but no CSS.
dark:bg-red dark:text-yellow
\ui\link.astro
```---
...
...
const styles = {
outline: "bg-white border-2 border-black hover:bg-gray-100 text-black ",
primary:
"bg-black text-white hover:bg-gray-800 border-2 border-transparent dark:bg-red dark:text-yellow",
inverted: "bg-white text-black border-2 border-transparent",
muted: "bg-gray-100 hover:bg-gray-200 border-2 border-transparent",
};
...:sob:
...
...
sharp owl
icy hazel
