2

I am trying to create reusable classes for things such as buttons or inputs.

I have a global.css file with this code

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

@layer components {
    .btn {
        @apply border border-pri hover: border-pri bg-pri rounded-lg py-2 px-4 font-semibold uppercase text-white hover: bg-sec transition duration-200 ease-in-out;
    }
}

:root {
    --primary: 88 28 135;
    --secondary: 147 51 234;
    --tertiary: 243 232 255;
}

If you look at the hover class, for some reason vscode keeps giving a space after writing a pseudo class or breakpoint such as hover or sm. I thought it was prettier but the issue still persists after doing the /* prettier-ignore */ comment. I am not sure what is causing this.

Even in the tailwind documents its shows that it is possible to add pseudo classes and breakpoints which is why I think it's vscode.

Has anyone else run into this? If it matters this is in a Next.js project.

Shawn
  • 109
  • 1
  • 12
  • I would try and disable all my extensions one by one to test which one is responsible for it. – ChenBr Oct 30 '22 at 12:16
  • I did that and even disabled all extensions but it was still happening. It must be a vscode setting. I have no clue where to even begin looking. – Shawn Oct 31 '22 at 16:04
  • 1
    Check those solutions: https://github.com/tailwindlabs/tailwindcss/discussions/6284 This one looks promising: https://github.com/tailwindlabs/tailwindcss/discussions/6284#discussioncomment-2724521 Let me know if it works :) – ChenBr Oct 31 '22 at 16:11
  • 1
    Thank you so much! Changing the settings below work! (File > Preferences > Settings) under Text Editor > Files. Enter *.css for the item, and tailwindcss for the value. – Shawn Oct 31 '22 at 18:51

1 Answers1

1

For those having the same issue this forum helped. Thank you ChenBr!

https://github.com/tailwindlabs/tailwindcss/discussions/6284

Go to settings (File > Preferences > Settings). Under Text Editor > Files. Click Add Item. Enter *.css for the item, and tailwindcss for the value

Shawn
  • 109
  • 1
  • 12