Task: Fix Tailwind component style priorities.

[maxcaplan]

What are you wanting to be added?

We need to have any Tailwind components using @apply to also be using @layer so that they are in the component layer and their styles can be easily overwritten when the component is used elsewhere in the code base.

Example: Original Class

.input {
  @apply border border-gray-300 rounded px-3 py-2 focus:outline-none;
}

New Class

@layer components {
  .input {
    @apply border border-gray-300 rounded px-3 py-2 focus:outline-none;
  }
}

The current fix for this is using important: true in tailwind.config.js. This is very bad and we want this removed. Here is a link to Tailwinds docs for @layer

What might break?

Currently using @layer causes most of the styles for the component to break. This may be an issue with how Tailwind is set up in the project and will need to be addressed.

Relevant Issues

No response

[erunks]

For more context, we used to use the @layer directive, but they were removed because they were breaking things.

References:

• Discord mention
• https://github.com/speedrun-website/speedrun.website/pull/18/commits/8a36f51cf7a0ba1dfd98cf5d18822b9e9cb101d9

[joshuasmall]

I've spent the past hour trying to get @layer to work

I get the error:

(49:0) /SearchBar.vue `@layer components` is used but no matching `@tailwind components` directive is present.

when using JIT.

Removing mode: 'jit' from tailwind.config.js removes the error but I think that the layer is then ignored.

[erunks]

@squiddot do you think this is something that still needs to happen after your big refactor PR #130 ?

[erunks]

@maxcaplan @squiddot do we still need this?

[erunks]

Closing this, as we apparently don't need it anymore