tailwindcss-font-size - npm Package Compare versions

Comparing version 0.1.3 to 1.0.0

package.json

		@@ -5,3 +5,3 @@ {
		"author": "RyoSogawa",
		"version": "0.1.3",
		"version": "1.0.0",
		"license": "MIT",
		@@ -8,0 +8,0 @@ "repository": "https://github.com/RyoSogawa/tailwindcss-font-size.git",

README.md

		@@ -5,6 +5,17 @@ # tailwindcss-font-size

		A plugin that provides utilities for font-size by `px` and `rem` ( px to rem ).
		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 between 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
		<!-- TailwindCSS JIT -->
		<p class="text-[22px]">Good</p>
		<p class="text-[1.375rem]">🧮 Needs Calculation...</p>

		<!-- This Plugin -->
		<p class="fsz-22px">Good</p>
		<p class="fsz-22ptr">🤓 No Calculation is Needed</p>
		```

		## Installation
		@@ -35,8 +46,8 @@ Install the plugin from npm:
		## Usage
		Use the `fsz-{n}px` or `fsz-{n}r` utilities to set font-size.
		`px` is for pixel, `r` is for rem ( px to rem ).
		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
		<p class="fsz-32px">This font size is 32px</p>
		<p class="fsz-32r">This font size is 2rem (if option.baseSize is 16px)</p>
		<p class="fsz-32ptr">This font size is 2rem (if option.baseSize is 16px)</p>
		```
		@@ -43,0 +54,0 @@

src/index.js

		@@ -14,3 +14,3 @@ const plugin = require('tailwindcss/plugin')
		const px = index + minSize
		const className = `fsz-${px}r`
		const className = `fsz-${px}ptr`
		return ['.' + e(className), { 'font-size': `${px / baseSize}rem` }]
		@@ -17,0 +17,0 @@ })

New alerts