Skip to content
Tailwind CSS plugin to generate individual border side style classes.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig
.gitignore
LICENSE.md
README.md
index.js
package.json
test.js
yarn.lock

README.md

Tailwind CSS Border Styles Plugin

Package Version Package Total Downloads

Requirements

Installation

Install via Yarn:

$ yarn add tailwindcss-border-styles

Usage

// tailwind.config.js
{
  theme: {
    borderStyles: {
      styles: true, // defaults to false
      colors: true, // defaults to false
    }
  }
  plugins: [
    require('tailwindcss-border-styles')(),
  ],
}

The following utilities are generated when styles is set to true:

.border-t-solid {
  border-top-style: solid;
}

.border-t-dashed {
  border-top-style: dashed;
}

.border-t-dotted {
  border-top-style: dotted;
}

.border-t-double {
  border-top-style: double;
}

.border-t-none {
  border-top-style: none;
}

.border-r-solid {
  border-right-style: solid;
}

.border-r-dashed {
  border-right-style: dashed;
}

.border-r-dotted {
  border-right-style: dotted;
}

.border-r-double {
  border-right-style: double;
}

.border-r-none {
  border-right-style: none;
}

.border-b-solid {
  border-bottom-style: solid;
}

.border-b-dashed {
  border-bottom-style: dashed;
}

.border-b-dotted {
  border-bottom-style: dotted;
}

.border-b-double {
  border-bottom-style: double;
}

.border-b-none {
  border-bottom-style: none;
}

.border-l-solid {
  border-left-style: solid;
}

.border-l-dashed {
  border-left-style: dashed;
}

.border-l-dotted {
  border-left-style: dotted;
}

.border-l-double {
  border-left-style: double;
}

.border-l-none {
  border-left-style: none;
}

The following utilities are generated when colors is set to true (based on your theme colors):

.border-t-white {
  border-top-color: #fff;
}

.border-r-white {
  border-right-color: #fff;
}

.border-b-white {
  border-bottom-color: #fff;
}

.border-l-white {
  border-left-color: #fff;
}

as well as the appropriate variants set on borderStyle & borderColor.

Testing

Tests are handled with Jest and can be ran using:

$ yarn run test

Bug Reports

If you discover a bug in Tailwind CSS Border Styles, please open an issue.

Contributing

Contributing whether it be through PRs, reporting an issue, or suggesting an idea is encouraged and appreciated.

License

Tailwind CSS Border Styles provided under the MIT License.

You can’t perform that action at this time.