CODEWITHSUNDEEP
cssreactjstailwind-css
Josh
Josh

Reputation: 1235

Trying to set several border-left properties on a button element when in focus but they don't display

I'm using TailwindCSS and React to build out a menu component with buttons for each Menu Item.

I'm trying to set the button styles to show a purple left border whenever a button is in the focus state.

I've set the styling following the TailwindCSS docs but for some reason the UI is not responding. I've tested single properties and they all work but I can't get border specific properties to cooperate.

I have a Codesandbox for demonstration

import React from "react";

const MenuItem = ({ feature, idx }) => {
  return (
    <div className="ml-6 active:border-l-8 border-purple600" key={idx}>
      <button className="focus:outline-none focus:border-l-6 focus:border-violet-600">
        <h4 className="sticky top-0 text-black">{feature.featureCategory}</h4>
      </button>
      {feature.featureTypes.map((x, idx) => {
        return (
          <h6 className="pt-4 text-black ml-8" key={idx}>
            {x.featureType}
          </h6>
        );
      })}
    </div>
  );
};

export default MenuItem;

Upvotes: 0

Views: 434

Answers (1)

Nathan Dawson
Nathan Dawson

Reputation: 19318

There are a couple of issues with the code you're using.

  • The TailWind package you're pulling in, via a CDN, is heavily out of date.
  • 6 isn't a default option for border widths in TailWind therefore won't be available via CDN.

Ensure you're using a more current version of TailWind. Then, either add 6 as an option for border width to your config file or add it as a generated style.

Example: https://play.tailwindcss.com/DcVZLcEvqr

<script src="https://cdn.tailwindcss.com"></script>

<button class="focus:outline-none focus:border-l-[6px] focus:border-violet-600">Example Button</button>

Upvotes: 1

Related Questions