Css không tưởng

Plugin TailwindCSS để tạo tỷ lệ khoảng cách và kiểu chữ linh hoạt được nội suy như được tạo bởi trình tạo utopia. fyi

Nếu bạn chưa có, hãy truy cập không tưởng. fyi và làm quen với các khái niệm

• Thiết kế với quy mô loại chất lỏng
• CSS chỉ quy mô chất lỏng
• Thiết kế với bảng màu không gian chất lỏng
• Vẽ tranh với bảng màu không gian chất lỏng

Plugin này về cơ bản tạo lại các máy tính từ không tưởng. fyi trong cấu hình tailwind của bạn

• Máy tính loại chất lỏng
• Máy tính không gian chất lỏng

Cài đặt

.fl:text-step--2 
.fl:text-step--1 
.fl:text-step-0 
.fl:text-step-1
.fl:text-step-2
.fl:text-step-3
.fl:text-step-4
.fl:text-step-5

4

Bắt đầu

Yêu cầu plugin trong tệp

.fl:text-step--2 
.fl:text-step--1 
.fl:text-step-0 
.fl:text-step-1
.fl:text-step-2
.fl:text-step-3
.fl:text-step-4
.fl:text-step-5

5 của bạn và tham khảo nó trong phần plugin

module.exports = {
  theme: {
  ...
  },
  plugins: [
    require('tailwind-utopia')
  ]
}

Ngay lập tức, điều này sẽ tạo ra cả thang đo loại chất lỏng và thang đo không gian chất lỏng với các giá trị mặc định giống như máy tính Utopia

• Tỷ lệ loại có 2 bước âm và 5 bước dương từ kích thước cơ sở 20px ở kích thước màn hình tối thiểu là 320px cho đến kích thước cơ sở 24px ở kích thước màn hình tối đa là 1140px, với tỷ lệ mô-đun là 1. 2 (phần ba nhỏ) ở kích thước màn hình tối thiểu và 1. 25 (chính thứ ba) ở kích thước màn hình tối đa
• Thang đo khoảng cách linh hoạt với kích thước áo phông từ 3x đến 3xl và các tiện ích cho từng cặp giá trị khoảng trắng trong thang đo

Quy mô đánh máy

các lớp tiện ích mặc định được tạo ra như sau

.fl:text-step--2 
.fl:text-step--1 
.fl:text-step-0 
.fl:text-step-1
.fl:text-step-2
.fl:text-step-3
.fl:text-step-4
.fl:text-step-5

Tỷ lệ khoảng cách

Ngay lập tức, điều này sẽ tạo ra một lớp tiện ích cho mỗi mục nhập trong thang đo đối với hầu hết tất cả các mục nhập Tailwind sử dụng thang đo khoảng cách

Quy mô mặc định

{
    '3xs': 0.25,
    '2xs': 0.5,
    'xs': 0.75,
    's': 1,
    'm': 1.5,
    'l': 2,
    'xl': 3,
    '2xl': 4,
    '3xl': 6,
}

Thuộc tính

{
    margin: {
        'm': ['margin'],
        'mt': ['margin-top'],
        'mr': ['margin-right'],
        'mb': ['margin-bottom'],
        'ml': ['margin-left'],
        'mx': ['margin-left', 'margin-right'],
        'my': ['margin-top', 'margin-bottom'],
    },
    padding: {
        'p': ['padding'],
        'pt': ['padding-top'],
        'pr': ['padding-right'],
        'pb': ['padding-bottom'],
        'pl': ['padding-left'],
        'px': ['padding-left', 'padding-right'],
        'py': ['padding-top', 'padding-bottom'],
    },
    space: {
        'space-x': ['margin-left', 'margin-right'],
        'space-y': ['margin-top', 'margin-bottom'],
    },
    gap: {
        'gap': ['gap'],
        'gap-y': ['row-gap'],
        'gap-x': ['column-gap'],
    },
    width: {
        'w': ['width'],
    },
    height: {
        'h': ['height'],
    },
    position: {
        'top': ['top'],
        'bottom': ['bottom'],
        'left': ['left'],
        'right': ['right'],
        'inset': ['top', 'bottom', 'right', 'left'],
        'inset-x': ['left', 'right'],
        'inset-y': ['top', 'bottom']
    }
}

Plugin cũng sẽ tạo các tiện ích cho các pais liền kề theo tỷ lệ. tôi. e. '2xs-xs', 'xs-s', 's-m', v.v. cho toàn thang đo

Mỗi kích thước trên thang đo cũng được thêm dưới dạng thuộc tính tùy chỉnh CSS vào bộ chọn

.fl:text-step--2 
.fl:text-step--1 
.fl:text-step-0 
.fl:text-step-1
.fl:text-step-2
.fl:text-step-3
.fl:text-step-4
.fl:text-step-5

6 (để cho phép bạn sử dụng khoảng cách ở những nơi khác trong kiểu của mình)

Ví dụ đầu ra mặc định

:root {
    --fs-xs: calc(...);
    --fs-s: calc(...);
    ...
    --fs-xs-s: calc(...);
    ...
}

.fl\:ml-xs {
    margin-left: var(--fs-xs);
}
.fl\mr-xs { .. }
...
.fl\my-xs-s { .. }
...etc

Tùy chỉnh quy mô của bạn

Plugin này là một plugin Tailwind tiêu chuẩn, với các giá trị mặc định được đặt bằng một đối tượng chủ đề. Vì vậy, tất cả các giá trị mặc định có thể được mở rộng trong các mục nhập

.fl:text-step--2 
.fl:text-step--1 
.fl:text-step-0 
.fl:text-step-1
.fl:text-step-2
.fl:text-step-3
.fl:text-step-4
.fl:text-step-5

7 trong tệp cấu hình Tailwind của bạn

Dưới đây là chủ đề mặc định được sử dụng bởi plugin

utopia: {
    minScreen: '320px',
    minSize: 21,
    minScale: 1.2,
    maxScreen: '1140px',
    maxSize: 24,
    maxScale: 1.25,
    textSizes: [],
    spacingSizes: {},
    spacingPairs: {},
    spacingCustomPairs: [],
}

• minScreen. kích thước màn hình mà tỷ lệ bắt đầu tại (số nguyên không có đơn vị hoặc px)
• kích thước tối thiểu. kích thước phông chữ cơ sở ở kích thước minScreen (số nguyên không có đơn vị)
• tỷ lệ tối thiểu. quy mô mô-đun để sử dụng cho kích thước loại ở kích thước màn hình tối thiểu (thập phân)
• maxScreen. kích thước màn hình mà tỷ lệ ngừng tăng (số nguyên hoặc px không có đơn vị)
• kích thước tối đa. kích thước phông chữ cơ sở a kích thước maxScreen (số nguyên không có đơn vị)
• maxScale. quy mô mô-đun để sử dụng ở kích thước maxScreen (thập phân)
• kích thước văn bản. tên lớp kích thước văn bản của bạn
• khoảng cách. tên lớp tỷ lệ khoảng cách và hệ số nhân liên quan
• khoảng cáchPairs. chỉ tạo các cặp được chỉ định
• khoảng cáchCustomPairs. các cặp khoảng cách không liền kề để tạo ra các tiện ích cho

Có thể vô hiệu hóa việc tạo tất cả các cặp tỷ lệ khoảng cách (xem cấu hình bên dưới). Nếu bạn làm điều này, bạn chỉ có thể cung cấp các cặp mà bạn muốn tạo các lớp để sử dụng mục nhập chủ đề

.fl:text-step--2 
.fl:text-step--1 
.fl:text-step-0 
.fl:text-step-1
.fl:text-step-2
.fl:text-step-3
.fl:text-step-4
.fl:text-step-5

8

Bạn cũng có thể tạo khoảng cách rộng hơn bằng cách cung cấp các cặp tùy chỉnh. Điều này là để tạo tỷ lệ giữa các mục tỷ lệ không liền kề. e. g. 's-xl', 'lg-2xl'

N. B. Mục nhập

.fl:text-step--2 
.fl:text-step--1 
.fl:text-step-0 
.fl:text-step-1
.fl:text-step-2
.fl:text-step-3
.fl:text-step-4
.fl:text-step-5

8 là một đối tượng, vì vậy chỉ có thể có một khóa cho mỗi kích thước.

{
    '3xs': 0.25,
    '2xs': 0.5,
    'xs': 0.75,
    's': 1,
    'm': 1.5,
    'l': 2,
    'xl': 3,
    '2xl': 4,
    '3xl': 6,
}

0 cần có khả năng xử lý nhiều cặp có cùng khóa bắt đầu e. g. 's-lg' và 's-2xl', do đó nên được cung cấp dưới dạng một mảng đối tượng

pairs: {
    s: 'md',
    lg: 'xl'
},
customPairs: [
    { s: 'md' },
    { s: 'lg' },
    { lg: '2xl' }
]

Bạn có thể tham khảo các phần khác trong cấu hình chủ đề của mình nếu bị hủy bỏ (e. g. để sử dụng các mục từ cấu hình màn hình của bạn). Một tùy chỉnh ví dụ có thể trông như sau

{
  extend: {
    utopia: theme => ({
        minScreen: theme('screens.sm'),
        maxScreen: theme('screens.xl'),
        maxScale: 1.5,
        textSizes: [
            'xs',
            'sm',
            'base',
            'lg',
            'xl',
            '2xl',
            '3xl',            
        ],

    }),
  },
}

N. B. Do cách thức hoạt động của chủ đề và tiện ích mở rộng của Tailwind, plugin này cung cấp các mục nhập trống vì đây là tệp chủ đề mặc định - điều này có nghĩa là tất cả tùy chỉnh sẽ diễn ra trong khóa

{
    '3xs': 0.25,
    '2xs': 0.5,
    'xs': 0.75,
    's': 1,
    'm': 1.5,
    'l': 2,
    'xl': 3,
    '2xl': 4,
    '3xl': 6,
}

1 của cấu hình Tailwind và bạn sẽ cần cung cấp toàn bộ mảng văn bản và kích thước khoảng cách mà bạn . Nếu bạn để trống các phím kích thước, chỉ khi đó plugin mới sử dụng mặc định của nó

Tùy chọn cấu hình

Plugin có các tùy chọn sau để định cấu hình kiểu lớp được tạo và cách chúng được tạo

OptionDefaultuseClampfalseprefix'fl. 'baseTextSize'step-0'generateSpacingtruegenerateAllSpacingPairstruegenerateFallbackstrue

Để gọi plugin với các tùy chọn, bạn chỉ cần thay đổi cách gọi plugin trong tệp cấu hình tailwind

module.exports = {
  ...
  plugins: [
    utopia({
      useClamp: true,
      baseStep: 'base',
    })
  ]
}

sử dụngKẹp

Theo mặc định (và theo thiết kế), Utopia tạo ra tỷ lệ của nó bằng cách sử dụng các thuộc tính tùy chỉnh CSS và

{
    '3xs': 0.25,
    '2xs': 0.5,
    'xs': 0.75,
    's': 1,
    'm': 1.5,
    'l': 2,
    'xl': 3,
    '2xl': 4,
    '3xl': 6,
}

2. Nó cũng có thể sử dụng hàm CSS

{
    '3xs': 0.25,
    '2xs': 0.5,
    'xs': 0.75,
    's': 1,
    'm': 1.5,
    'l': 2,
    'xl': 3,
    '2xl': 4,
    '3xl': 6,
}

3 để tạo các kiểu một dòng ngắn gọn. e. g

.fl\:text-step-0 {
  font-size: clamp(1rem, 0.7143rem + 1.4286vw, 2rem);
}

Đặt tùy chọn này thành true sẽ tạo kiểu khai báo kẹp. Để biết thêm chi tiết về kẹp, hãy đọc bài đăng trên blog này từ utopia. fyi

N. B. có những hạn chế khi sử dụng clamp() - đáng chú ý nhất là khả năng truy cập, vì nó có thể hạn chế khả năng thu phóng văn bản của người dùng. Điều này có thể dẫn đến việc không đáp ứng tiêu chí WCAG. Để biết thêm chi tiết, hãy xem bài đăng này từ Adrian Roselli

tiếp đầu ngữ

Theo mặc định, plugin này sẽ thêm tiền tố vào tất cả các bộ chọn tiện ích với tiền tố là

{
    '3xs': 0.25,
    '2xs': 0.5,
    'xs': 0.75,
    's': 1,
    'm': 1.5,
    'l': 2,
    'xl': 3,
    '2xl': 4,
    '3xl': 6,
}

4. Bạn có thể tùy chỉnh cái này thành bất cứ thứ gì bạn chọn với tùy chọn cấu hình này. Đây là giá trị mặc định vì nó tránh xung đột với kích thước văn bản cơ sở (tĩnh) của Tailwind

Sử dụng tiền tố trống
Có thể (tốt hơn?) không có tiền tố. Nếu làm điều này, bạn có thể cân nhắc tắt plugin Kích thước phông chữ chính của Tailwind, nghĩa là tất cả các kích thước văn bản trong dự án của bạn sẽ linh hoạt. Tuy nhiên, có vẻ như bạn sẽ không muốn tắt phần bổ trợ Khoảng cách lõi, vì vậy, tốt nhất là đảm bảo rằng không có khóa nào trong các kích thước khoảng cách của bạn xung đột với các giá trị mặc định lõi của Tailwind

.fl:text-step--2 
.fl:text-step--1 
.fl:text-step-0 
.fl:text-step-1
.fl:text-step-2
.fl:text-step-3
.fl:text-step-4
.fl:text-step-5

0

baseTextSize

Trong nội bộ, plugin cần biết bước nào trong thang đo của bạn là âm và bước nào là dương. Điều này được thực hiện bằng cách xác định bước cơ bản trong thang đo của bạn. Bất kỳ mục nào trong mảng kích thước trước cơ sở được coi là âm, tất cả những mục sau là dương

tạo khoảng cách

Đặt thành false để tắt hoàn toàn việc tạo các tiện ích giãn cách chất lỏng

tạo ALLPairs

Khi được bật sẽ tạo các lớp tiện ích cho mọi tập hợp các cặp liền kề trên thang đo. Mặc định là true, điều này tạo ra rất nhiều lớp, nhưng dù sao thì bạn cũng nên sử dụng purgeCSS hoặc tương tự để dọn sạch các lớp không sử dụng khỏi kết quả sản xuất của mình. Tuy nhiên, nếu bạn muốn giới hạn các cặp được tạo, bạn có thể tắt cài đặt này và cung cấp một bộ cặp tùy chỉnh trong cấu hình chủ đề của mình (xem bên trên)

tạoFalbacks

Theo mặc định, mỗi tiện ích cũng sẽ có kích thước dự phòng tĩnh được tạo để phù hợp với các trình duyệt không hỗ trợ thuộc tính tùy chỉnh CSS (IE11)

N. B. Bản thân Tailwind không còn chính thức hỗ trợ IE11 và sử dụng nội bộ các thuộc tính tùy chỉnh cho các hiệu ứng khác nhau. Như vậy, ngay cả khi bật dự phòng, các tiện ích

{
    '3xs': 0.25,
    '2xs': 0.5,
    'xs': 0.75,
    's': 1,
    'm': 1.5,
    'l': 2,
    'xl': 3,
    '2xl': 4,
    '3xl': 6,
}

5 và

{
    '3xs': 0.25,
    '2xs': 0.5,
    'xs': 0.75,
    's': 1,
    'm': 1.5,
    'l': 2,
    'xl': 3,
    '2xl': 4,
    '3xl': 6,
}

6 sẽ không hoạt động

Ví dụ sử dụng. Thay thế hoàn toàn các lớp văn bản Tailwind bằng các phiên bản linh hoạt

Bằng cách sử dụng cấu hình sau, bạn có thể thay thế tỷ lệ kiểu chữ mặc định của Tailwind bằng tỷ lệ linh hoạt, giữ nguyên tên lớp, cho phép trang bị thêm vào trang web tailwind hiện có

.fl:text-step--2 
.fl:text-step--1 
.fl:text-step-0 
.fl:text-step-1
.fl:text-step-2
.fl:text-step-3
.fl:text-step-4
.fl:text-step-5

1

Ví dụ sử dụng. Truy cập quy mô được tạo

Plugin này thực hiện một việc khác có thể hữu ích trên trang web của bạn. plugin thêm tỷ lệ đã tạo vào một khóa trong cấu hình Tailwind. Sau đó, bạn có thể tham khảo thang đo này trong các plugin khác

điều không tưởng. Mục nhập SpacingScale sẽ có cấu trúc giống như mục nhập chủ đề Tailwind mặc định cho khoảng cách, nhưng sử dụng các biến css được tạo cho các giá trị

.fl:text-step--2 
.fl:text-step--1 
.fl:text-step-0 
.fl:text-step-1
.fl:text-step-2
.fl:text-step-3
.fl:text-step-4
.fl:text-step-5

2

Để kích hoạt tính năng này, chỉ cần thêm một mục nhập của

{
    '3xs': 0.25,
    '2xs': 0.5,
    'xs': 0.75,
    's': 1,
    'm': 1.5,
    'l': 2,
    'xl': 3,
    '2xl': 4,
    '3xl': 6,
}

7 vào phần mở rộng chủ đề của bạn

.fl:text-step--2 
.fl:text-step--1 
.fl:text-step-0 
.fl:text-step-1
.fl:text-step-2
.fl:text-step-3
.fl:text-step-4
.fl:text-step-5

3

Hãy cẩn thận

Để điều này hoạt động, plugin giãn cách phải xuất hiện đầu tiên trong mảng plugin của bạn (hoặc ít nhất là trước bất kỳ plugin nào muốn sử dụng quy mô được tạo)

Sẽ rất tuyệt, nhưng không thể (theo như tôi có thể tìm ra) để sửa đổi mục nhập

{
    '3xs': 0.25,
    '2xs': 0.5,
    'xs': 0.75,
    's': 1,
    'm': 1.5,
    'l': 2,
    'xl': 3,
    '2xl': 4,
    '3xl': 6,
}

8 mặc định và để nó được chọn bởi các Plugin cốt lõi

Tất cả các plugin cốt lõi đều chạy (và đã sử dụng chủ đề) trước khi bất kỳ plugin tùy chỉnh nào chạy, vì vậy quy mô được tạo không có trong chủ đề tại thời điểm các plugin cốt lõi tạo tiện ích của chúng

Giấy phép

Phân phối theo Giấy phép MIT. Xem

{
    '3xs': 0.25,
    '2xs': 0.5,
    'xs': 0.75,
    's': 1,
    'm': 1.5,
    'l': 2,
    'xl': 3,
    '2xl': 4,
    '3xl': 6,
}

9 để biết thêm thông tin

Sự nhìn nhận

Toàn bộ tín dụng cho Utopia và thang loại chất lỏng nội suy được tạo bởi plugin này thuộc về James Gilyead và Trys Mudford