https://github.com/ryosogawa/tailwindcss-font-size
TailwindCSS's plugin of px to rem font-size
https://github.com/ryosogawa/tailwindcss-font-size
npm-package tailwindcss tailwindcss-plugin
Last synced: 2 months ago
JSON representation
TailwindCSS's plugin of px to rem font-size
- Host: GitHub
- URL: https://github.com/ryosogawa/tailwindcss-font-size
- Owner: RyoSogawa
- License: mit
- Created: 2022-02-04T13:40:05.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-19T09:09:39.000Z (almost 2 years ago)
- Last Synced: 2024-10-18T09:04:36.666Z (8 months ago)
- Topics: npm-package, tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/tailwindcss-font-size
- Size: 120 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# tailwindcss-font-size
[](http://badge.fury.io/js/tailwindcss-font-size)
[](LICENSE)
A plugin that provides utilities for font-size by `px` and `rem` ( **px to rem** ).
[demo(playground)](https://codesandbox.io/s/tailwindcss-font-size-3ixwv?file=/public/index.html)
Deference from TailwindCSS's JIT(Just in Time) is that this plugin calculates the rem font-size based on the font-size of the root element.
```html
Good
🧮 Needs Calculation...
Good
🤓 No Calculation is Needed
```
## Installation
Install the plugin from npm:
```
# Using npm
npm install tailwindcss-font-size
# Using Yarn
yarn add tailwindcss-font-size
```
Then add the plugin to your `tailwind.config.js` file:
```js
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwindcss-font-size'),
// ...
],
}
```
## Usage
Use the `fsz-{n}px` or `fsz-{n}ptr` utilities to set font-size.
`px` is for pixel, `ptr` is for rem ( px to rem ).
```html
This font size is 32px
This font size is 2rem (if option.baseSize is 16px)
```
## Configuration
You can configure the plugin by passing options to its constructor.
Parameters and default values are below.
```js
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwindcss-font-size')({
baseSize: 16, // html font-size
minSize: 10,
maxSize: 128
}),
// ...
],
}
```
## Contribution
Please feel free to open an issue or make a pull request.
## License
Distributed under the MIT License. See [LICENSE](./LICENSE) for more information.