#TailwindCSS Positioning Problem

7 messages · Page 1 of 1 (latest)

green pecan

thumbnail preview sucks

shadow sparrowBOT
  • Consider reading #how-to-get-help to improve your question!
  • Explain what exactly your issue is.
  • Post the full error stack trace, not just the top part!
  • Show your code!
  • Issue solved? Press the button!
  • ✅ Marked as resolved by OP
green pecan

Hellu humans,
I suck at CSS, thus I suck at using Tailwind.

I have the following container:

The banner at the top right is (imo) correctly positioned, but I can't get the text to be centered in the visible part of it.

{env && (
    <div className={`
        absolute top-0 right-0 ${getEnvColor()} text-white text-xs font-bold py-1 px-8
        tracking-[0.25em] transform translate-x-[35%] -translate-y-[10%] rotate-45 shadow-md
        w-64 text-center overflow-hidden
    `}>
        {env.toUpperCase()}
    </div>
)}

Any ideas appreciated.

green pecan

sometimes I think too hard