Tailwind CSS Outlines Plugin

Installation

Note that tailwindcss-outlines is designed for Tailwind CSS v2.0.

Install the plugin from npm:

# Using npm
npm install tailwindcss-outlines

# Using Yarn
yarn add tailwindcss-outlines

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-outlines'),
    // ...
  ],
}

Usage

Set the following properties in your tailwind.config.js theme options.

outlineColor: theme => ({
  ...theme('colors')
}),
outlineStyle: {
  default: 'solid',
  solid: 'solid',
  dotted: 'dotted'
},
outlineWidth: {
  default: '4px',
  '0': '0',
  '2': '2px',
  '4': '4px',
  '6': '6px',
  '8': '8px',
  '10': '10px'
},
outlineOffset: {
  '0': '0',
  '1': '1px',
  '2': '2px',
  '4': '4px'
}

Feel free to open an issue, if you are having a trouble with tailwindcss-outlines. PR's are welcome.

LICENSE

MIT