Astro Tailwind

[tame vortex]

First time using tailwind. So I've a stylesheet where I'm using some basic style that I want to use like: h5 {font-size: 1.200rem; /* 19.2px */}. During the npm dev the font-size is not getting applied and is replaced by the tailwind value of font-size : inherit;. But after getting deployed on vercel / npm build. It's using the stylesheet. How do I get it to work normally in dev.
astro.config.mjs

import { defineConfig } from 'astro/config';
import vercel from "@astrojs/vercel/serverless";
import tailwind from "@astrojs/tailwind";
// https://astro.build/config
export default defineConfig({
  output: "hybrid",
  adapter: vercel(),
  integrations: [tailwind()]
});

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

[nocturne knot]

You could try to customize base styles: https://tailwindcss.com/docs/adding-base-styles#using-css

[tame vortex]

When I used @tailwind base; in my css the @tailwind is getting underlined saying Unknown at rule @tailwind. I still kept going

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h5 {
      font-size: 1.2rem;
  }
// also tried 
  h5 {
  @apply text-xl;
  }
}

it's still not getting applied in the npm dev though. But showing up on inspect but crossed.
Do I have to import @tailwind ?? In the docs they're just using @tailwind. I dont know what I'm doing wrong.
Why is it tailwind taking precedence in npm dev but is getting replaced after build?

[tame vortex]

note! using stylesheet as import onto the astropage layout.

[nocturne knot]

I see your problem. I was dealing with this strange behavior before. I can apply uppercase or text-color-red-500 on h1 but not the font-size... Is it an issue on Tailwind ? https://github.com/tailwindlabs/tailwindcss/issues/1460

[vapid zodiac]

I think this may be a problem with the import order of the CSS when using the integration's base stylesheet default, you can try setting applyBaseStyles to false and import your own stylesheet for more control over the import order of your CSS: https://docs.astro.build/en/guides/integrations-guide/tailwind/#applybasestyles

[tame vortex]

setting applyBaseStyles: false, is causing all tailwind class styles to not be applied. 🤔

import { defineConfig } from 'astro/config';
import vercel from "@astrojs/vercel/serverless";

import tailwind from "@astrojs/tailwind";

// https://astro.build/config
export default defineConfig({
  output: "hybrid",
  adapter: vercel(),
  integrations: [tailwind({
    applyBaseStyles: false,
  })]
});

[vapid zodiac]

You have to import a style sheet like this to reapply the tailwind styles: css @tailwind base; @tailwind components; @tailwind utilities; Import it before your custom stylesheet so that your h5 styles override tailwind defaults

[tame vortex]

Got it. It's working.
Just a quick question even tho it's working but bothering me, kinda. Why is there a yellow underline below @tailwind : Unknown at rule @tailwindcss(unknownAtRules). Can I get rid of it?

[vapid zodiac]

It is trying to warn you that the rule may not exist even though it does, I am not too sure how to fix this though

[tame vortex]

lol. Thanks for the help tho. Much love. 💛

[nocturne knot]

Hi @Malik. Could you post your final result? I don't undertsand why certain rules work but not font-size or @apply text-4xl. Could someone points me the difference ?

[tame vortex]

It was due to tailwind base css that was taking precedence over my stylesheet but only in npm dev tho, it worked as it should in npm build dont know why. applyBaseStyles: false just solved the problem of having the tailwind's base css.