[suggestion]: use scss WITH tailwindcss.

[GameLord2011]

My idea is to 1(00) up your site's code performance, by using tailwindcss for quick styling, and scss for anything that tailwind does not have a class for, like complex animations that have-to-have stupid vendor prefixes to make them work. You can copy the implementation in my website. This is the structure this is the full implementation, I have it active on my website, so I know that it works.

/*
  Janky implementation by @GameLord2011
*/

​@use "tailwindcss";

/*
  You can use code like @custom-variant dark (&:is(.dark *));
  to modify utility classes,
  that code changes the functionality of the dark: prefix,
  which uses @(prefers-color-scheme: dark) for a .dark class
  on the body tag
*/

@theme {
  /*
    You put theme stuff in here, such as foreground and background colors.
  */
}

/*
  This code is from tailwind4
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

You also need this json in the .vscode folder, in the css-data.json file, for vscode not to yell at you:

{
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@theme",
      "description": "@theme configures the tailwindcss theme.",
      "references": [
        {
          "name": "Documentation",
          "url": "https://tailwindcss.com/docs/theme"
        }
      ]
    },
    {
      "name": "@custom-variant",
      "description": "@custom-variant configures custom variants for tailwindcss.",
      "references": [
        {
          "name": "Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives"
        }
      ]
    }
  ]
}

And this code in settings.json:

{
  "css.customData": ["./.vscode/css-data.json"]
}

And that's it, two great css libs, together at last!

[GameLord2011]

If you do put the code in, could you add the

/*
  Janky implementation by @GameLord2011
*/

comment right before the tailwind import?