3

I am using Astro Tailwind integration, and I am trying to add some tailwind classes to MainLayout.astro which resides in layouts directory as follows

<!DOCTYPE html>
<html lang="en">
  <head>
     ...
  </head>
  <body>
    <main class="mx-20 mb-20 md:mb-28 xl:container xl:mx-auto">
      <slot />
    </main>
  </body>
</html>

But styles are not getting applied to the <main> tag (according to browser dev tools inspection), but styles to the rest of the pages are getting applied.

What I have tried?

  • Restarting the dev server

Edit:

tailwind.config.cjs look like below

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

Edit 2:

astro.config.mjs

import { defineConfig } from "astro/config";
import react from "@astrojs/react";
import image from "@astrojs/image";

import tailwind from "@astrojs/tailwind";

// https://astro.build/config
export default defineConfig({
  integrations: [
    react(),
    tailwind(),
    image({
      serviceEntryPoint: "@astrojs/image/sharp",
    }),
  ],
});
user158
  • 12,852
  • 7
  • 62
  • 94

0 Answers0