├── .gitignore
├── index.js
├── package.json
├── readme.md
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const ModularScale = require('modularscale-js');
 2 | 
 3 | module.exports = function({
 4 |     sizes = [
 5 |         { size: 'sm', value: -1 },
 6 |         { size: 'base', value: 0 },
 7 |         { size: 'lg', value: 1 },
 8 |         { size: 'xl', value: 2 },
 9 |         { size: '2xl', value: 3 },
10 |         { size: '3xl', value: 4 },
11 |         { size: '4xl', value: 5 }
12 |     ],
13 |     base = 16,
14 |     ratio = 1.33,
15 |     unit = 'px',
16 |     variants
17 | }) {
18 |     const ms = function(size) {
19 |         const value = ModularScale(size, { base, ratio });
20 | 
21 |         if (unit === 'px') {
22 |             return Math.round(value) + unit;
23 |         } else {
24 |             return value.toFixed(2) + unit;
25 |         }
26 |     }
27 | 
28 |     return function({ addUtilities }) {
29 |         const utilities = sizes.map(({ size, value }) => ({
30 |             [`.ms-${size}`]: {
31 |                 fontSize: ms(value),
32 |             },
33 |         }));
34 | 
35 |         addUtilities(utilities, variants);
36 |     }
37 | }
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tailwindcss-modularscale",
 3 |   "version": "1.1.0",
 4 |   "description": "Modular scale plugin for TailwindCSS.",
 5 |   "main": "index.js",
 6 |   "repository": "https://github.com/artisanstudio/tailwindcss-modularscale",
 7 |   "author": "Jaggy Gauran jaggy@artisan.studio",
 8 |   "license": "MIT",
 9 |   "keywords": [
10 |     "tailwind",
11 |     "tailwindcss",
12 |     "tailwindcss-plugin"
13 |   ],
14 |   "dependencies": {
15 |     "modularscale-js": "^3.0.1"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # TailwindCSS Modular Scale Plugin
 2 | 
 3 | Modular scale is used in typography as a sequence of text sizes are harmonious to each other.
 4 | 
 5 | [Here's an article that explains the Modular Scale far better than I ever will](https://alistapart.com/article/more-meaningful-typography)
 6 | 
 7 | ## Installation
 8 | 
 9 | ```sh
10 | # NPM
11 | npm install --save-dev tailwindcss-modularscale
12 | 
13 | # Yarn
14 | yarn add --dev tailwindcss-modularscale
15 | ```
16 | 
17 | ## Usage
18 | 
19 | ### Default configuration.
20 | ```js
21 | module.exports = {
22 |   // ...
23 | 
24 |   plugins: [
25 |     require('tailwindcss-modularscale')()
26 |   ],
27 | }
28 | ```
29 | 
30 | The default configuration:
31 | ```js
32 | {
33 |   sizes: [
34 |     { size: 'sm', value: -1 },
35 |     { size: 'base', value: 0 },
36 |     { size: 'lg', value: 1 },
37 |     { size: 'xl', value: 2 },
38 |     { size: '2xl', value: 3 },
39 |     { size: '3xl', value: 4 },
40 |     { size: '4xl', value: 5 }
41 |   ],
42 |   base:  16,
43 |   ratio: 1.333, // Perfect Fourth
44 |   unit: 'px',
45 | }
46 | ```
47 | 
48 | The generated code will use `.ms-` to avoid conflicts with the `textSize` utilities.
49 | 
50 | ```css
51 | .ms-sm   { font-size: 12px; }
52 | .ms-base { font-size: 16px; }
53 | .ms-lg   { font-size: 21px; }
54 | .ms-xl   { font-size: 28px; }
55 | .ms-2xl  { font-size: 38px; }
56 | .ms-3xl  { font-size: 51px; }
57 | .ms-4xl  { font-size: 67px; }
58 | ```
59 | 
60 | ### Custom configuration
61 | ```js
62 | module.exports = {
63 |   // ...
64 | 
65 |   plugins: [
66 |     require('tailwindcss-modularscale')({
67 |       sizes: [
68 |         { size: 'base', value: 0 },
69 |         { size: 'lg', value: 1 },
70 |       ],
71 |       base:  1,
72 |       ratio: 1.2,
73 |       unit: 'rem',
74 |     })
75 |   ],
76 | }
77 | ```
78 | 
79 | ### To add other variants of the font sizes
80 | ```js
81 | module.exports = {
82 |   // ...
83 | 
84 |   plugins: [
85 |     require('tailwindcss-modularscale')({
86 |       base:     16,
87 |       ratio:    1.333,
88 |       variants: ['responsive'],
89 |     })
90 |   ],
91 | }
92 | ```
93 | 
94 | 
95 | ## Limitations
96 | 
97 | As of now, this plugin only supports one base size. I'm still not sure what's the best utility class if I were to support multiple base sizes.
98 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 | 
4 | 
5 | modularscale-js@^3.0.1:
6 |   version "3.0.1"
7 |   resolved "https://registry.yarnpkg.com/modularscale-js/-/modularscale-js-3.0.1.tgz#6b3e6a3ecac678210a14a3f700c4e7da141af9e3"
8 | 


--------------------------------------------------------------------------------