👉🏻 tailwindcss-fluid-type
Một plugin giúp sử dụng kiểu chữ đáp ứng dễ dàng.
👉🏻 Cài đặt
Cài đặt plugin từ npm:
# Using npm
npm install tailwindcss-fluid-type
# Using Yarn
yarn add tailwindcss-fluid-type
Sau đó thêm plugin vào tệp tailwind.config.js của bạn và cấu hình nếu bạn không hài lòng với các giá trị mặc định:
// tailwind.config.js
module.exports = {
// You can disable the fontSize core plugin if you don't need non fluid font sizes.
// If you don't disable it, the fluid-type plugin simply overrule the default font-sizes if the keys are the same.
// Or you can use both alongside when you set an prefix in the settings
corePlugins: {
fontSize: false,
// ...
},
plugins: [
require('tailwindcss-fluid-type'),
// ...
],
};
👉🏻 Sử dụng
Không có gì thay đổi ở đây so với cấu hình mặc định của tailwindcss:
<article>
<h1 class="text-xl">Fluid type</h1>
</article>
👉🏻 Cấu hình
Plugin đi kèm với một cấu hình mặc định (xem dưới đây) nhưng bạn có thể tùy chỉnh cấu hình này cho dự án của bạn. Theo mặc định, chúng tôi sử dụng rem để tăng tính truy cập, nhưng bạn cũng có thể sử dụng px.
_ Lưu ý quan trọng:_
Nếu bạn đặt giá trị, bạn phải đặt tất cả các giá trị cần thiết cho cácfont-sizecủa bạn. Không có sự kết hợp giá trị ở đây.
Cấu hình mặc định
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-fluid-type')({
// your fluid type settings
// works only with unitless numbers
// This numbers are the defaults settings
settings: {
fontSizeMin: 1.125, // 1.125rem === 18px
fontSizeMax: 1.25, // 1.25rem === 20px
ratioMin: 1.125, // Multiplicator Min
ratioMax: 1.2, // Multiplicator Max
screenMin: 20, // 20rem === 320px
screenMax: 96, // 96rem === 1536px
unit: 'rem', // default is rem but it's also possible to use 'px'
prefix: '', // set a prefix to use it alongside the default font sizes
extendValues: true, // When you set extendValues to true it will extend the default values. Set it to false to overwrite the values.
},
// Creates the text-xx classes
// This are the default settings and analog to the tailwindcss defaults
// Each `lineHeight` is set unitless and we think that's the way to go especially in context with fluid type.
values: {
'xs': [-2, 1.6],
'sm': [-1, 1.6],
'base': [0, 1.6],
'lg': [1, 1.6],
'xl': [2, 1.2],
'2xl': [3, 1.2],
'3xl': [4, 1.2],
'4xl': [5, 1.1],
'5xl': [6, 1.1],
'6xl': [7, 1.1],
'7xl': [8, 1],
'8xl': [9, 1],
'9xl': [10, 1],
},
}),
],
variants: {
fluidType: ['responsive']
}
};
Cấu hình kiểu chữ đáp ứng mà không có lineHeight
Cũng có thể đặt chỉ fontSize mà không cần đặt lineHeight
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-fluid-type')({
values: {
// ...
'base': 0,
// ...
}
}),
]
};
Cấu hình kiểu chữ đáp ứng với lineHeight & letterSpacing
Và có, bạn cũng có thể đặt letterSpacing & lineHeight như bạn biết từ tài liệu tailwind. letterSpacing có thể là bất kỳ giá trị nào bạn thích.
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-fluid-type')({
values: {
// ...
'base': [0,
{
lineHeight: 1.6,
letterSpacing: '-0.1rem',
}
],
// ...
}
}),
]
};
👉🏻 Mẫu
Chỉ đặt thuộc tính fontSize
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-fluid-type')({
settings: {
fontSizeMin: 1.125,
fontSizeMax: 1.25,
ratioMin: 1.125,
ratioMax: 1.2,
screenMin: 20,
screenMax: 96,
unit: 'rem',
prefix: ''
},
values: {
// ...
'base': 0,
// ...
}
}),
]
};
<p class="text-base">The quick brown fox jumps over the lazy dogs</p>
.text-base {
font-size: clamp(1.125rem, calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))), 1.25rem);
}
Đặt thuộc tính fontSize & lineHeight
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-fluid-type')({
settings: {
fontSizeMin: 1.125,
fontSizeMax: 1.25,
ratioMin: 1.125,
ratioMax: 1.2,
screenMin: 20,
screenMax: 96,
unit: 'rem',
prefix: ''
},
values: {
// ...
'base': [0, 1.6],
// ...
}
}),
]
};
<p class="text-base">The quick brown fox jumps over the lazy dogs</p>
.text-base {
font-size: clamp(1.125rem, calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))), 1.25rem);
line-height: 1.6;
}
Đặt thuộc tính fontSize, lineHeight & letterSpacing
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-fluid-type')({
settings: {
fontSizeMin: 1.125,
fontSizeMax: 1.25,
ratioMin: 1.125,
ratioMax: 1.2,
screenMin: 20,
screenMax: 96,
unit: 'rem',
prefix: '',
},
values: {
// ...
'base': [0, {
lineHeight: 1.6,
letterSpacing: '-0.1rem',
}],
// ...
}
}),
]
};
<p class="text-base">The quick brown fox jumps over the lazy dogs</p>
.text-base {
font-size: clamp(1.125rem, calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))), 1.25rem);
line-height: 1.6;
letter-spacing: -0.1rem;
}
Đặt một giá trị dưới dạng chuỗi
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-fluid-type')({
values: {
// ...
'2xs': '11px',
// ...
}
}),
]
};
<p class="text-2xs">The quick brown fox jumps over the lazy dogs</p>
.text-2xs {
font-size: 11px;
}
Đặt một tiền tố
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-fluid-type')({
settings: {
// ...
prefix: 'fluid-',
},
}),
]
};
<p class="fluid-text-base">The quick brown fox jumps over the lazy dogs</p>
.fluid-text-base {
font-size: clamp(1.125rem, calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))), 1.25rem);
line-height: 1.6;
letter-spacing: -0.1rem;
}
👉🏻 Xem Trực Tiếp
Thông tin Tải về:
Tác giả: davidhellmann
Nguồn: https://github.com/davidhellmann/tailwindcss-fluid-type
Giấy phép: MIT license
