TailwindCSS plugin to create outline utility classes, analog to those for border.
Class | Properties |
---|---|
.outline |
outline-width: 1px; |
.outline-2 |
outline-width: 2px; |
.outline-4 |
outline-width: 4px; |
.outline-8 |
outline-width: 8px; |
.outline-solid |
outline-style: solid; |
.outline-dashed |
outline-style: dashed; |
.outline-dotted |
outline-style: dotted; |
.outline-double |
outline-style: double; |
.outline-offset-1 |
outline-offset: 2px; |
.outline-offset-2 |
outline-offset: 4px; |
.outline-offset-3 |
outline-offset: 8px; |
.outline-offset-4 |
outline-offset: 12px; |
.-outline-offset-1 |
outline-offset: -2px; |
.-outline-offset-2 |
outline-offset: -4px; |
.-outline-offset-3 |
outline-offset: -8px; |
.-outline-offset-4 |
outline-offset: -12px; |
.outline-black |
outline-color: black; |
.outline-white |
outline-color: white; |
.outline-{color}-{modifier} |
outline-color: {value} |
To control the outline style of an element at a specific breakpoint, add a {screen}:
prefix to any existing outline style utility. For example, use md:outline-dotted
to apply the outline-dotted
utility at only medium screen sizes and above.
For more information about Tailwind's responsive design features, check out the Responsive Design documentation.
By default, only responsive variants are generated for outline style utilities.
You can control which variants are generated for the outline style utilities by modifying the outlineWidth
, outlineStyle
, outlineOffset
, and/or outlineColor
properties in the variants
section of your tailwind.config.js
file.
For example, this config will also generate hover and focus variants for all utilities, except for outline-style
:
// tailwind.config.js
module.exports = {
variants: {
// ...
outlineWidth: ["responsive", "hover", "focus"],
outlineStyle: ["responsive"],
outlineOffset: ["responsive", "hover", "focus"],
outlineColor: ["responsive", "hover", "focus"],
}
}
# Install using npm
npm install --save-dev tailwindcss-outline
# Install using yarn
yarn add -D tailwindcss-outline
In your tailwind.config.js:
module.exports = {
// …
plugins: [
// …
require("tailwindcss-outline")
]
};