Html Question posted in
Some basic documentation can be found here.

Html – How to make outline use the same color that a border would be?

In tailwind

<div class="border w-80 h-80 m-80"></div>

and

<div class="outline w-80 h-80 m-80"></div>

look totally different, at least after injecting preflight by using @tailwind base; in my CSS.

I would like to make the outline case look as similar as possible to the border.

I have thought about adding custom extensions in my tailwind.config.js, e.g.

module.exports = {
  theme: {
    extend: {
      outlineColor: 'var(--tw-border-color)',
      /* or */
      outlineColor: {
        primary: 'red',
      }
    }
  }
}

But these unfortunately haven’t worked at all,

  1. I don’t think tailwind sets a --tw-border-color variable
  2. using the second try 
    <div class="outline outline-primary w-80 h-80 m-80"></div>

    doesn’t make a red outline.

I would prefer to not have to hardcode the color, the best solution would be that the lone outline classname always produces an outline that looks the same as the border that the lone border classname would produce.

I would like to use outline instead of border so that I can solve the problem of double-borders in a grid in a more convenient way.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've found a way that works, but it requires adding custom old school CSS.

    Just manually copy all of Preflight's border styles onto outlines.

    So, I've copypasted Preflight's section on borders into my stylesheet, and edited it to point at the analogous outline styles instead:

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

@layer base {
    *,
    ::before,
    ::after {
        /* https://unpkg.com/[email protected]/src/css/preflight.css */
        outline-width: 0;
        outline-style: solid;
        outline-color: theme('borderColor.DEFAULT', currentColor);
        outline-offset: 0;
    }
}

  2. 0

    You must customize the outline utility in your Tailwind configuration. Unfortunately, by default, Tailwind CSS does not natively tie outline styles to the colour of the border. However, you can achieve this functionality with a combination of custom CSS variables and Tailwind’s configuration.

    Here’s a solution to make the outline match the colour of the border:

    Step 1: Utilize Custom CSS Variables
    Add your own custom CSS variable for the --tw-border-color. You can assign this variable using Tailwind’s border utilities.

     /* In your global CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

.border {
  --tw-border-color: currentColor;
}

    Step 2: Extend the Tailwind Config
    Update your tailwind.config.js with the following to generate a default outline colour which takes the same variable as the bordercolourr.

    module.exports = {
  theme: {
    extend: {
      outlineColor: {
        DEFAULT: 'var(--tw-border-color)',
      },
    },
  },
  plugins: [],
};

    Step 3 Use the Utility Classes
    Now you can apply the outline utility, which will default to the same colour as the border.

    <div class="border w-80 h-80 m-80"></div>
<div class="outline outline-2 w-80 h-80 m-80"></div>

    Step 4: Optional – Match other border styles
    If you also want to add it so that it copies the outline width, use the custom class:

    .outline {
  outline-width: var(--tw-border-width, 1px);
}

    Now, every time you use the outline class, it will inherit from the default border-color as well and will look even more like the border class, thus avoiding the double border problem in grids.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search