archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Add hover variants for font weight utilities

Browse Source
This commit is contained in:
Adam Wathan 2017-10-21 10:52:39 -04:00
parent 481b19e50e
commit eba5970810
2 changed files with 93 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
__tests__/fixtures/tailwind.css
View File

@ -619,39 +619,48 @@ button,
font-size: 2.875rem;
}
.font-hairline {
.font-hairline,
.hover\:font-hairline:hover {
font-weight: 100;
}
.font-thin {
.font-thin,
.hover\:font-thin:hover {
font-weight: 200;
}
.font-light {
.font-light,
.hover\:font-light:hover {
font-weight: 300;
}
.font-normal {
.font-normal,
.hover\:font-normal:hover {
font-weight: 400;
}
.font-medium {
.font-medium,
.hover\:font-medium:hover {
font-weight: 500;
}
.font-semibold {
.font-semibold,
.hover\:font-semibold:hover {
font-weight: 600;
}
.font-bold {
.font-bold,
.hover\:font-bold:hover {
font-weight: 700;
}
.font-extrabold {
.font-extrabold,
.hover\:font-extrabold:hover {
font-weight: 800;
}
.font-black {
.font-black,
.hover\:font-black:hover {
font-weight: 900;
}
@ -3360,39 +3369,48 @@ button,
font-size: 2.875rem;
}
.sm\:font-hairline {
.sm\:font-hairline,
.sm\:hover\:font-hairline:hover {
font-weight: 100;
}
.sm\:font-thin {
.sm\:font-thin,
.sm\:hover\:font-thin:hover {
font-weight: 200;
}
.sm\:font-light {
.sm\:font-light,
.sm\:hover\:font-light:hover {
font-weight: 300;
}
.sm\:font-normal {
.sm\:font-normal,
.sm\:hover\:font-normal:hover {
font-weight: 400;
}
.sm\:font-medium {
.sm\:font-medium,
.sm\:hover\:font-medium:hover {
font-weight: 500;
}
.sm\:font-semibold {
.sm\:font-semibold,
.sm\:hover\:font-semibold:hover {
font-weight: 600;
}
.sm\:font-bold {
.sm\:font-bold,
.sm\:hover\:font-bold:hover {
font-weight: 700;
}
.sm\:font-extrabold {
.sm\:font-extrabold,
.sm\:hover\:font-extrabold:hover {
font-weight: 800;
}
.sm\:font-black {
.sm\:font-black,
.sm\:hover\:font-black:hover {
font-weight: 900;
}
@ -6102,39 +6120,48 @@ button,
font-size: 2.875rem;
}
.md\:font-hairline {
.md\:font-hairline,
.md\:hover\:font-hairline:hover {
font-weight: 100;
}
.md\:font-thin {
.md\:font-thin,
.md\:hover\:font-thin:hover {
font-weight: 200;
}
.md\:font-light {
.md\:font-light,
.md\:hover\:font-light:hover {
font-weight: 300;
}
.md\:font-normal {
.md\:font-normal,
.md\:hover\:font-normal:hover {
font-weight: 400;
}
.md\:font-medium {
.md\:font-medium,
.md\:hover\:font-medium:hover {
font-weight: 500;
}
.md\:font-semibold {
.md\:font-semibold,
.md\:hover\:font-semibold:hover {
font-weight: 600;
}
.md\:font-bold {
.md\:font-bold,
.md\:hover\:font-bold:hover {
font-weight: 700;
}
.md\:font-extrabold {
.md\:font-extrabold,
.md\:hover\:font-extrabold:hover {
font-weight: 800;
}
.md\:font-black {
.md\:font-black,
.md\:hover\:font-black:hover {
font-weight: 900;
}
@ -8844,39 +8871,48 @@ button,
font-size: 2.875rem;
}
.lg\:font-hairline {
.lg\:font-hairline,
.lg\:hover\:font-hairline:hover {
font-weight: 100;
}
.lg\:font-thin {
.lg\:font-thin,
.lg\:hover\:font-thin:hover {
font-weight: 200;
}
.lg\:font-light {
.lg\:font-light,
.lg\:hover\:font-light:hover {
font-weight: 300;
}
.lg\:font-normal {
.lg\:font-normal,
.lg\:hover\:font-normal:hover {
font-weight: 400;
}
.lg\:font-medium {
.lg\:font-medium,
.lg\:hover\:font-medium:hover {
font-weight: 500;
}
.lg\:font-semibold {
.lg\:font-semibold,
.lg\:hover\:font-semibold:hover {
font-weight: 600;
}
.lg\:font-bold {
.lg\:font-bold,
.lg\:hover\:font-bold:hover {
font-weight: 700;
}
.lg\:font-extrabold {
.lg\:font-extrabold,
.lg\:hover\:font-extrabold:hover {
font-weight: 800;
}
.lg\:font-black {
.lg\:font-black,
.lg\:hover\:font-black:hover {
font-weight: 900;
}
@ -11586,39 +11622,48 @@ button,
font-size: 2.875rem;
}
.xl\:font-hairline {
.xl\:font-hairline,
.xl\:hover\:font-hairline:hover {
font-weight: 100;
}
.xl\:font-thin {
.xl\:font-thin,
.xl\:hover\:font-thin:hover {
font-weight: 200;
}
.xl\:font-light {
.xl\:font-light,
.xl\:hover\:font-light:hover {
font-weight: 300;
}
.xl\:font-normal {
.xl\:font-normal,
.xl\:hover\:font-normal:hover {
font-weight: 400;
}
.xl\:font-medium {
.xl\:font-medium,
.xl\:hover\:font-medium:hover {
font-weight: 500;
}
.xl\:font-semibold {
.xl\:font-semibold,
.xl\:hover\:font-semibold:hover {
font-weight: 600;
}
.xl\:font-bold {
.xl\:font-bold,
.xl\:hover\:font-bold:hover {
font-weight: 700;
}
.xl\:font-extrabold {
.xl\:font-extrabold,
.xl\:hover\:font-extrabold:hover {
font-weight: 800;
}
.xl\:font-black {
.xl\:font-black,
.xl\:hover\:font-black:hover {
font-weight: 900;
}

5
src/generators/textWeights.js
View File

@ -1,10 +1,11 @@
import _ from 'lodash'
import defineClass from '../util/defineClass'
import hoverable from '../util/hoverable'
export default function ({ text }) {
return _.map(text.weights, (weight, modifier) => {
return hoverable(_.map(text.weights, (weight, modifier) => {
return defineClass(`font-${modifier}`, {
'font-weight': `${weight}`,
})
})
}))
}