Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cirolee/tailwindcss-extra
tailwindcss plugin for extra styles
https://github.com/cirolee/tailwindcss-extra
Last synced: 3 days ago
JSON representation
tailwindcss plugin for extra styles
- Host: GitHub
- URL: https://github.com/cirolee/tailwindcss-extra
- Owner: CiroLee
- License: mit
- Created: 2023-11-24T08:46:53.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-02-23T11:04:21.000Z (9 months ago)
- Last Synced: 2024-04-24T19:04:58.775Z (7 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/tailwindcss-extra
- Size: 14.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tailwindcss-extra
tailwindcss plugin for extra styles
## Install
```bash
npm install tailwindcss-extra --save-dev
```
## Usage
```diff
# commonjs
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
+ plugins: [require('tailwindcss-extra')],
};
```
```diff
# es module
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
+ import tailwindcssExtra from 'tailwindcss-extra';
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
+ plugins: [tailwindcssExtra],
};
```
complete table of provided classes:
| name | kind | description |
| ----------------- | ------ | -------------------------------------------------------- |
| flex-center | static | both horizontal and vertical center in flex display |
| absolute-center | static | both horizontal and vertical center in absolute position |
| absolute-center-x | static | horizontal center in absolute position |
| absolute-center-y | static | vertical center in absolute position |
| full | static | set width and height as `100%` to its parent |
| screen | static | set width as `100vw` and height as `100vh` |
| circle | match | use `clip-path` to make a circle |
| square | match | make a square box via setting both width and height |
| translate-1/2 | static | translate x and y axis by 1/2 |
| -translate-1/2 | static | translate x and y axis by -1/2 |