Skip to content

Commit 53089c1

Browse files
author
David Heinemeier Hansson
committed
Add Inter as the default font
1 parent 448ec97 commit 53089c1

22 files changed

+218
-13
lines changed

README.md

+5-3
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,17 @@ Tailwind CSS for Rails makes it easy to use this CSS framework with the asset pi
66

77
This gem just gives access to the standard Tailwind CSS framework. If you need to customize Tailwind, you will need to install it the traditional way using [Webpacker](https://github.com/rails/webpacker) instead. This gem is purely intended for those who wish to use Tailwind CSS with the asset pipeline.
88

9-
The version of Tailwind included in this gem has been configured for dark mode, forms, aspect-ratio, and typography.
9+
The version of Tailwind included in this gem has been configured for dark mode, forms, aspect-ratio, typography, and the Inter font.
10+
1011

1112
## Installation
1213

1314
1. Run `./bin/bundle add tailwindcss-rails`
1415
2. Run `./bin/rails tailwindcss:install` (on a fresh Rails application)
1516

16-
The last option adds the purger compressor to `config/environments/production.rb`. This ensures that when `assets:precompile` is called during deployment that the unused class names are not included in the tailwind output css used by the app. It also adds a `stylesheet_link_tag "tailwind"` to your `app/views/application.html.erb` file.
17+
The last option adds the purger compressor to `config/environments/production.rb`. This ensures that when `assets:precompile` is called during deployment that the unused class names are not included in the tailwind output css used by the app. It also adds a `stylesheet_link_tag "tailwind"` and `stylesheet_link_tag "inter-font"` to your `app/views/application.html.erb` file.
1718

18-
You can do both things yourself, if you've changed the default setup.
19+
You can do these things yourself, if you've changed the default setup.
1920

2021

2122
## Purging in production
@@ -39,6 +40,7 @@ By default, the CSS purger will only operate on the tailwind css file included w
3940
config.assets.css_compressor = Tailwindcss::Compressor.new(only_purge: %w[ tailwind and_my_other_css_file ])
4041
```
4142

43+
4244
## License
4345

4446
Tailwind for Rails is released under the [MIT License](https://opensource.org/licenses/MIT).
Binary file not shown.
36.5 KB
Binary file not shown.
32.4 KB
Binary file not shown.
30.6 KB
Binary file not shown.
Binary file not shown.
54.8 KB
Binary file not shown.
20.2 KB
Binary file not shown.
Binary file not shown.
Binary file not shown.
34.4 KB
Binary file not shown.
29.9 KB
Binary file not shown.
28.9 KB
Binary file not shown.
61.1 KB
Binary file not shown.
50.7 KB
Binary file not shown.
17.9 KB
Binary file not shown.
Binary file not shown.
+194
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
/*
2+
*= link_directory ../fonts
3+
*/
4+
5+
@font-face {
6+
font-family: 'Inter var';
7+
font-style: italic;
8+
font-weight: 100 900;
9+
font-display: swap;
10+
src: url('<%= asset_path "Inter-italic.extra.var.woff2" %>') format('woff2');
11+
unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
12+
font-named-instance: 'Italic';
13+
}
14+
/* alternates */
15+
@font-face {
16+
font-family: 'Inter var';
17+
font-style: italic;
18+
font-weight: 100 900;
19+
font-display: swap;
20+
src: url('<%= asset_path "Inter-italic.alternates.var.woff2" %>') format('woff2');
21+
unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
22+
font-named-instance: 'Italic';
23+
}
24+
/* symbols */
25+
@font-face {
26+
font-family: 'Inter var';
27+
font-style: italic;
28+
font-weight: 100 900;
29+
font-display: swap;
30+
src: url('<%= asset_path "Inter-italic.symbols.var.woff2" %>') format('woff2');
31+
unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
32+
font-named-instance: 'Italic';
33+
}
34+
35+
/* extra */
36+
@font-face {
37+
font-family: 'Inter var';
38+
font-style: italic;
39+
font-weight: 100 900;
40+
font-display: swap;
41+
src: url('<%= asset_path "Inter-italic.extra.var.woff2" %>') format('woff2');
42+
unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
43+
font-named-instance: 'Italic';
44+
}
45+
/* alternates */
46+
@font-face {
47+
font-family: 'Inter var';
48+
font-style: italic;
49+
font-weight: 100 900;
50+
font-display: swap;
51+
src: url('<%= asset_path "Inter-italic.alternates.var.woff2" %>') format('woff2');
52+
unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
53+
font-named-instance: 'Italic';
54+
}
55+
/* symbols */
56+
@font-face {
57+
font-family: 'Inter var';
58+
font-style: italic;
59+
font-weight: 100 900;
60+
font-display: swap;
61+
src: url('<%= asset_path "Inter-italic.symbols.var.woff2" %>') format('woff2');
62+
unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
63+
font-named-instance: 'Italic';
64+
}
65+
/* cyrillic */
66+
@font-face {
67+
font-family: 'Inter var';
68+
font-style: italic;
69+
font-weight: 100 900;
70+
font-display: swap;
71+
src: url('<%= asset_path "Inter-italic.cyrillic.var.woff2" %>') format('woff2');
72+
unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
73+
font-named-instance: 'Italic';
74+
}
75+
/* greek */
76+
@font-face {
77+
font-family: 'Inter var';
78+
font-style: italic;
79+
font-weight: 100 900;
80+
font-display: swap;
81+
src: url('<%= asset_path "Inter-italic.greek.var.woff2" %>') format('woff2');
82+
unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
83+
font-named-instance: 'Italic';
84+
}
85+
/* vietnamese */
86+
@font-face {
87+
font-family: 'Inter var';
88+
font-style: italic;
89+
font-weight: 100 900;
90+
font-display: swap;
91+
src: url('<%= asset_path "Inter-italic.vietnamese.var.woff2" %>') format('woff2');
92+
unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
93+
font-named-instance: 'Italic';
94+
}
95+
/* latin-ext */
96+
@font-face {
97+
font-family: 'Inter var';
98+
font-style: italic;
99+
font-weight: 100 900;
100+
font-display: swap;
101+
src: url('<%= asset_path "Inter-italic.latin-ext.var.woff2" %>') format('woff2');
102+
unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
103+
font-named-instance: 'Italic';
104+
}
105+
/* latin */
106+
@font-face {
107+
font-family: 'Inter var';
108+
font-style: italic;
109+
font-weight: 100 900;
110+
font-display: swap;
111+
src: url('<%= asset_path "Inter-italic.latin.var.woff2" %>') format('woff2');
112+
unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
113+
font-named-instance: 'Italic';
114+
}
115+
/* extra */
116+
@font-face {
117+
font-family: 'Inter var';
118+
font-style: normal;
119+
font-weight: 100 900;
120+
font-display: swap;
121+
src: url('<%= asset_path "Inter-roman.extra.var.woff2" %>') format('woff2');
122+
unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
123+
font-named-instance: 'Regular';
124+
}
125+
/* alternates */
126+
@font-face {
127+
font-family: 'Inter var';
128+
font-style: normal;
129+
font-weight: 100 900;
130+
font-display: swap;
131+
src: url('<%= asset_path "Inter-roman.alternates.var.woff2" %>') format('woff2');
132+
unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
133+
font-named-instance: 'Regular';
134+
}
135+
/* symbols */
136+
@font-face {
137+
font-family: 'Inter var';
138+
font-style: normal;
139+
font-weight: 100 900;
140+
font-display: swap;
141+
src: url('<%= asset_path "Inter-roman.symbols.var.woff2" %>') format('woff2');
142+
unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
143+
font-named-instance: 'Regular';
144+
}
145+
/* cyrillic */
146+
@font-face {
147+
font-family: 'Inter var';
148+
font-style: normal;
149+
font-weight: 100 900;
150+
font-display: swap;
151+
src: url('<%= asset_path "Inter-roman.cyrillic.var.woff2" %>') format('woff2');
152+
unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
153+
font-named-instance: 'Regular';
154+
}
155+
/* greek */
156+
@font-face {
157+
font-family: 'Inter var';
158+
font-style: normal;
159+
font-weight: 100 900;
160+
font-display: swap;
161+
src: url('<%= asset_path "Inter-roman.greek.var.woff2" %>') format('woff2');
162+
unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
163+
font-named-instance: 'Regular';
164+
}
165+
/* vietnamese */
166+
@font-face {
167+
font-family: 'Inter var';
168+
font-style: normal;
169+
font-weight: 100 900;
170+
font-display: swap;
171+
src: url('<%= asset_path "Inter-roman.vietnamese.var.woff2" %>') format('woff2');
172+
unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
173+
font-named-instance: 'Regular';
174+
}
175+
/* latin-ext */
176+
@font-face {
177+
font-family: 'Inter var';
178+
font-style: normal;
179+
font-weight: 100 900;
180+
font-display: swap;
181+
src: url('<%= asset_path "Inter-roman.latin-ext.var.woff2" %>') format('woff2');
182+
unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
183+
font-named-instance: 'Regular';
184+
}
185+
/* latin */
186+
@font-face {
187+
font-family: 'Inter var';
188+
font-style: normal;
189+
font-weight: 100 900;
190+
font-display: swap;
191+
src: url('<%= asset_path "Inter-roman.latin.var.woff2" %>') format('woff2');
192+
unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
193+
font-named-instance: 'Regular';
194+
}

app/assets/stylesheets/tailwind.css

+7-7
Original file line numberDiff line numberDiff line change
@@ -364,7 +364,7 @@ ul {
364364
*/
365365

366366
html {
367-
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
367+
font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
368368
line-height: 1.5; /* 2 */
369369
}
370370

@@ -20793,7 +20793,7 @@ select {
2079320793
}
2079420794

2079520795
.font-sans {
20796-
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
20796+
font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
2079720797
}
2079820798

2079920799
.font-serif {
@@ -67670,7 +67670,7 @@ select {
6767067670
}
6767167671

6767267672
.sm\:font-sans {
67673-
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
67673+
font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
6767467674
}
6767567675

6767667676
.sm\:font-serif {
@@ -114469,7 +114469,7 @@ select {
114469114469
}
114470114470

114471114471
.md\:font-sans {
114472-
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
114472+
font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
114473114473
}
114474114474

114475114475
.md\:font-serif {
@@ -161268,7 +161268,7 @@ select {
161268161268
}
161269161269

161270161270
.lg\:font-sans {
161271-
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
161271+
font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
161272161272
}
161273161273

161274161274
.lg\:font-serif {
@@ -208067,7 +208067,7 @@ select {
208067208067
}
208068208068

208069208069
.xl\:font-sans {
208070-
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
208070+
font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
208071208071
}
208072208072

208073208073
.xl\:font-serif {
@@ -254866,7 +254866,7 @@ select {
254866254866
}
254867254867

254868254868
.\32xl\:font-sans {
254869-
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
254869+
font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
254870254870
}
254871254871

254872254872
.\32xl\:font-serif {

lib/install/tailwindcss.rb

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
if APPLICATION_LAYOUT_PATH.exist?
44
say "Add Tailwindcss include tags in application layout"
5-
insert_into_file Rails.root.join("app/views/layouts/application.html.erb").to_s, %(\n <%= stylesheet_link_tag "tailwind" %>), before: /^\s*<%= stylesheet_link_tag/
5+
insert_into_file Rails.root.join("app/views/layouts/application.html.erb").to_s, %(\n <%= stylesheet_link_tag "inter-font" %>\n <%= stylesheet_link_tag "tailwind" %>), before: /^\s*<%= stylesheet_link_tag/
66
else
77
say "Default application.html.erb is missing!", :red
8-
say %( Add <%= stylesheet_link_tag "tailwind" %> within the <head> tag in your custom layout.)
8+
say %( Add <%= stylesheet_link_tag "inter-font" %> and <%= stylesheet_link_tag "tailwind" %> within the <head> tag in your custom layout.)
99
end
1010

1111
say "Turn on purging of unused css classes in production"

lib/tailwindcss/engine.rb

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ class Engine < ::Rails::Engine
77
end
88

99
initializer "tailwindcss.assets" do
10-
Rails.application.config.assets.precompile += %w( tailwind )
10+
Rails.application.config.assets.precompile += %w( tailwind.css inter-font.css )
1111
end
1212
end
1313
end

tailwind.config.js

+9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
1+
const defaultTheme = require('tailwindcss/defaultTheme')
2+
13
module.exports = {
24
darkMode: 'media',
5+
theme: {
6+
extend: {
7+
fontFamily: {
8+
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
9+
},
10+
},
11+
},
312
plugins: [
413
require('@tailwindcss/forms'),
514
require('@tailwindcss/aspect-ratio'),

0 commit comments

Comments
 (0)