Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kripod/tailwindcss-inner-border
A Tailwind CSS plugin that provides utilities for creating inner borders with box-shadow.
https://github.com/kripod/tailwindcss-inner-border
border box-shadow inset inside plugin tailwind
Last synced: 17 days ago
JSON representation
A Tailwind CSS plugin that provides utilities for creating inner borders with box-shadow.
- Host: GitHub
- URL: https://github.com/kripod/tailwindcss-inner-border
- Owner: kripod
- License: mit
- Created: 2022-10-15T16:13:15.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-23T15:29:39.000Z (over 1 year ago)
- Last Synced: 2024-11-11T19:15:57.385Z (about 2 months ago)
- Topics: border, box-shadow, inset, inside, plugin, tailwind
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/tailwindcss-inner-border
- Size: 22.5 KB
- Stars: 15
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# tailwindcss-inner-border
A plugin that provides utilities for creating inner borders with box-shadow.
## Installation
Install the plugin from npm:
```sh
npm install -D tailwindcss-inner-border
```
Then add the plugin to your `tailwind.config.js` file:
```js
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require("tailwindcss-inner-border"),
// ...
],
};
```
## Usage
Use the `inner-border-{n}` utilities to set the inner border width for all sides of an element:
```html
```
Control the inner border color of an element using the `inner-border-{color}` utilities:
```html
```
Variants and color opacity modifiers may also be used:
```html
```
## Configuration
You can configure which values and variants are generated by this plugin under the `borderWidth` and `borderColor` keys in your `tailwind.config.js` file.
> **Note**
>
> By default, Tailwind makes the entire default color palette available as border colors. You can customize your color palette by editing `theme.colors` or `theme.extend.colors` as shown below.
```diff
// tailwind.config.js
module.exports = {
theme: {
borderWidth: {
DEFAULT: "1px",
0: "0px",
2: "2px",
+ 3: "3px",
4: "4px",
+ 6: "6px",
- 8: "8px",
},
extend: {
+ colors: {
+ "regal-blue": "#243c5a",
+ },
},
},
};
```