Last active
April 7, 2025 17:13
-
-
Save czak/c11552bbaa0dc7ac176cfabe000accfc to your computer and use it in GitHub Desktop.
Generate type scale for TailwindCSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#!/usr/bin/env ruby | |
if ARGV.empty? | |
puts 'Usage: genscale.rb 1.125' | |
exit 1 | |
end | |
scale = ARGV.first.to_f | |
steps = %w[xs sm base lg xl 2xl 3xl 4xl 5xl 6xl 7xl 8xl 9xl] | |
offset = -2 | |
puts " /* Type scale: #{scale} */" | |
steps.each.with_index do |step, i| | |
val = 1 | |
n = i + offset | |
if n.negative? | |
(-n).times { val /= scale } | |
else | |
n.times { val *= scale } | |
end | |
puts format(' --text-%<step>s: %<val>0.3frem;', step: step, val: val) | |
end |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Type scale: 1.2 */ | |
--text-xs: 0.694rem; | |
--text-sm: 0.833rem; | |
--text-base: 1.000rem; | |
--text-lg: 1.200rem; | |
--text-xl: 1.440rem; | |
--text-2xl: 1.728rem; | |
--text-3xl: 2.074rem; | |
--text-4xl: 2.488rem; | |
--text-5xl: 2.986rem; | |
--text-6xl: 3.583rem; | |
--text-7xl: 4.300rem; | |
--text-8xl: 5.160rem; | |
--text-9xl: 6.192rem; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment