Tailwind CSS v2 có gì mới?

Thứ Bảy, 16/01/2021

Tram Ho

I. Lời mở đầu

Tailwindcss – một utility-first CSS framework, đang dần trở nên phổ biến trong giới lập trình frontend với 34.7k star trên github và gần 2k fork contribute. Có thể thấy Tailwindcss đang dần hoàn thiện để tiếp nối sức ảnh hưởng của bootstrap trong thời điểm hiện tại.

Trải qua quá trình phát triển cũng như release nhiều phiên bản, Tailwindcss cho ra mắt v2, đã cải thiện đáng kể nào là placeholder styling, screenreader visibility, CSS grid, transitions, transforms, animations, layout utilities, integrated tree-shaking, gradients, … và nhiều tiện ích khá “ngon” cho Frontend Developer.

II. Nội dung chính

1. Tailwindcss cung cấp bảng mã màu mới

Nếu như ở v1: https://v1.tailwindcss.com/docs/customizing-colors Tailwindcss chỉ có 10 màu chính thì ở v2 con số đã lên đến 22 màu chính với 10 sắc thái mỗi màu nâng tổng số các màu sắc lên con số 220.
Tailwindcss cấu hình sẵn cho ta 8 màu cơ bản, bạn có thể import tailwindcss/colors và sử dụng. Khi nào cần thì ta import trong tailwind.config.js nhé

<span class="token comment">// tailwind.config.js</span>
<span class="token keyword">const</span> colors <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'tailwindcss/colors'</span><span class="token punctuation">)</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    colors<span class="token operator">:</span> <span class="token punctuation">{</span>
      gray<span class="token operator">:</span> colors<span class="token punctuation">.</span>trueGray<span class="token punctuation">,</span>
      indigo<span class="token operator">:</span> colors<span class="token punctuation">.</span>indigo<span class="token punctuation">,</span>
      red<span class="token operator">:</span> colors<span class="token punctuation">.</span>rose<span class="token punctuation">,</span>
      yellow<span class="token operator">:</span> colors<span class="token punctuation">.</span>amber<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

// tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {

theme: {

colors: {

gray: colors.trueGray,

indigo: colors.indigo,

red: colors.rose,

yellow: colors.amber,

},

}

2. Dark mode

Như các bạn có thể thấy hầu hết các trang web hiện nay đều sử dụng 2 theme chính là Dark mode and Light mode. Có thể kể đến như: Facebook, Github, Viblo, …
Ta chỉ cần khai báo trong tailwind config:

<span class="token comment">// tailwind.config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  darkMode<span class="token operator">:</span> <span class="token string">'media'</span><span class="token punctuation">,</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

// tailwind.config.js

module.exports = {

darkMode: 'media',

// ...

}

3. Mở rộng 2XL breakpoint

Để hỗ trợ responsive ở những màn hình rộng hơn, cụ thể thì Tailwindcss trong config mặc định:

<span class="token comment">// tailwind.config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    screens<span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token string">'sm'</span><span class="token operator">:</span> <span class="token string">'640px'</span><span class="token punctuation">,</span>
      <span class="token comment">// =&gt; @media (min-width: 640px) { ... }</span>

      <span class="token string">'md'</span><span class="token operator">:</span> <span class="token string">'768px'</span><span class="token punctuation">,</span>
      <span class="token comment">// =&gt; @media (min-width: 768px) { ... }</span>

      <span class="token string">'lg'</span><span class="token operator">:</span> <span class="token string">'1024px'</span><span class="token punctuation">,</span>
      <span class="token comment">// =&gt; @media (min-width: 1024px) { ... }</span>

      <span class="token string">'xl'</span><span class="token operator">:</span> <span class="token string">'1280px'</span><span class="token punctuation">,</span>
      <span class="token comment">// =&gt; @media (min-width: 1280px) { ... }</span>

      <span class="token string">'2xl'</span><span class="token operator">:</span> <span class="token string">'1536px'</span><span class="token punctuation">,</span>
      <span class="token comment">// =&gt; @media (min-width: 1536px) { ... }</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

// tailwind.config.js

module.exports = {

theme: {

screens: {

'sm': '640px',

// => @media (min-width: 640px) { ... }

'md': '768px',

// => @media (min-width: 768px) { ... }

'lg': '1024px',

// => @media (min-width: 1024px) { ... }

'xl': '1280px',

// => @media (min-width: 1280px) { ... }

'2xl': '1536px',

// => @media (min-width: 1536px) { ... }

}

và sau đó sử dụng:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>... 2xl:text-9xl<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Viblo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>

<h1 class="... 2xl:text-9xl">Viblo</h1>

Cá nhân mình ngay từ v1.9 thì bạn hoàn toàn có thể customize độ lớn của màn hình responsive rồi :v nên sự thay đổi này không có gì đặc biệt lắm.

4. Những tiện ích mới cho outline ring

Ring cung cấp một solid box-shadow cho thẻ, ví dụ khi bạn muốn focus vào 1 button và nó sẽ có thêm 1 solid box-shadow thì bạn thêm như sau:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
  <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>... focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50<span class="token punctuation">"</span></span>
<span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- ... --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>

<button

class="... focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50"

>

</button>

Bạn có thể thêm các hiệu ứng với ring-offset-{width}

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
 <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>... focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-300 focus:ring-opacity-50<span class="token punctuation">"</span></span>
<span class="token punctuation">&gt;</span></span>
Viblo
&lt;/button

<button

class="... focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-300 focus:ring-opacity-50"

>

Viblo

</button

Viêc sử dụng ring cũng có thể kết hợp với shadow:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>shadow-sm focus:ring-2 ...<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    Viblo
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>

Viblo

</button>

5. Utility-friendly form styles

TailwindCss cung cấp thêm 1 plugin cho forms được khai báo tại @tailwindcss/forms

<span class="token comment">// tailwind.config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@tailwindcss/forms'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

// tailwind.config.js

module.exports = {

// ...

plugins: [require('@tailwindcss/forms')],

}

6. Mặc định line-heights theo font-size

Khi khai báo font-size thì sẽ khai báo line-heights kèm theo luôn.

<span class="token comment">// Tailwind's default theme</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
    fontSize<span class="token operator">:</span> <span class="token punctuation">{</span>
      xs<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'0.75rem'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> lineHeight<span class="token operator">:</span> <span class="token string">'1rem'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      sm<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'0.875rem'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> lineHeight<span class="token operator">:</span> <span class="token string">'1.25rem'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      base<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1rem'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> lineHeight<span class="token operator">:</span> <span class="token string">'1.5rem'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      lg<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1.125rem'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> lineHeight<span class="token operator">:</span> <span class="token string">'1.75rem'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      xl<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1.25rem'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> lineHeight<span class="token operator">:</span> <span class="token string">'1.75rem'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token string">'2xl'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1.5rem'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> lineHeight<span class="token operator">:</span> <span class="token string">'2rem'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token string">'3xl'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1.875rem'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> lineHeight<span class="token operator">:</span> <span class="token string">'2.25rem'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token string">'4xl'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'2.25rem'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> lineHeight<span class="token operator">:</span> <span class="token string">'2.5rem'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token string">'5xl'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'3rem'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> lineHeight<span class="token operator">:</span> <span class="token string">'1'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token string">'6xl'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'3.75rem'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> lineHeight<span class="token operator">:</span> <span class="token string">'1'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token string">'7xl'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'4.5rem'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> lineHeight<span class="token operator">:</span> <span class="token string">'1'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token string">'8xl'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'6rem'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> lineHeight<span class="token operator">:</span> <span class="token string">'1'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token string">'9xl'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'8rem'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> lineHeight<span class="token operator">:</span> <span class="token string">'1'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

// Tailwind's default theme

module.exports = {

theme: {

// ...

fontSize: {

xs: ['0.75rem', { lineHeight: '1rem' }],

sm: ['0.875rem', { lineHeight: '1.25rem' }],

base: ['1rem', { lineHeight: '1.5rem' }],

lg: ['1.125rem', { lineHeight: '1.75rem' }],

xl: ['1.25rem', { lineHeight: '1.75rem' }],

'2xl': ['1.5rem', { lineHeight: '2rem' }],

'3xl': ['1.875rem', { lineHeight: '2.25rem' }],

'4xl': ['2.25rem', { lineHeight: '2.5rem' }],

'5xl': ['3rem', { lineHeight: '1' }],

'6xl': ['3.75rem', { lineHeight: '1' }],

'7xl': ['4.5rem', { lineHeight: '1' }],

'8xl': ['6rem', { lineHeight: '1' }],

'9xl': ['8rem', { lineHeight: '1' }],

},

}

Chính vì thế khi ta sử dụng font-size base thì thẻ sẽ nhận line-height là 1.5rem. Ví dụ:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-base<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Viblo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

<p class="text-base">Viblo</p>

Ngoài ra, thuộc tính leading (line-height) khi được viết cùng font-size sẽ ghi đè line-height của thẻ.

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-base leading-none<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Viblo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

<p class="text-base leading-none">Viblo</p>

7. Mở rộng spacing, typography, and opacity

Thêm bắt đầu từ các giá trị 0.5, 1.5, 2.5, và 3.5 cho các khoảng trống khi chúng ta sử dụng padding, margin, …

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ml-0.5<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Viblo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>

<span class="ml-0.5">Viblo</span>

Và kết thúc bởi các giá trị 72, 80, và 96:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>p-96<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Viblo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<div class="p-96">Viblo</div>

Thêm thuộc tính inset để căn vị trí (top/right/bottom/left):

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inset-0<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Viblo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<div class="inset-0">Viblo</div>

Fontsize mở rộng thêm các thuộc tính 7xl, 8xl, and 9xl:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-9xl<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Viblo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>

<h1 class="text-9xl">Viblo</h1>

Opacity mở rộng từ 0 đến 100:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>figure</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>opacity-10<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    Viblo
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>figure</span><span class="token punctuation">&gt;</span></span>

Viblo

</figure>

8. Sử dụng @apply với mọi thứ

Bạn có thể sử dụng @apply để inline các class utility cho các thẻ:

.btn {
  @apply bg-indigo-500 hover:bg-indigo-600 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50;
}

.btn {

@apply bg-indigo-500 hover:bg-indigo-600 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50;

}

9. Thêm tiện ích mới cho text overflow

Thêm overflow-ellipsis and overflow-clip

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>overflow-ellipsis overflow-hidden<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  viblo
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

viblo

</p>

10. Mở rộng variants

Ở phiên bản trước, muốn sử dụng thuộc tính focus-visible cho backgroundColor thì phải liệt kê trong config tất cả các thuộc tính kiểu như:

<span class="token comment">// tailwind.config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
  variants<span class="token operator">:</span> <span class="token punctuation">{</span>
    backgroundColor<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'responsive'</span><span class="token punctuation">,</span> <span class="token string">'hover'</span><span class="token punctuation">,</span> <span class="token string">'focus'</span><span class="token punctuation">,</span> <span class="token string">'focus-visible'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

// tailwind.config.js

module.exports = {

// ...

variants: {

backgroundColor: ['responsive', 'hover', 'focus', 'focus-visible'],

},

}

Còn với TailwindCss v2:

<span class="token comment">// tailwind.config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
  variants<span class="token operator">:</span> <span class="token punctuation">{</span>
    extend<span class="token operator">:</span> <span class="token punctuation">{</span>
      backgroundColor<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'focus-visible'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

// tailwind.config.js

module.exports = {

// ...

variants: {

extend: {

backgroundColor: ['focus-visible'],

},

}

11. Khai báo group-hover and focus-within

group-hover and focus-within được bật mặc định:

<span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"group ..."</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"group-hover:text-blue-600 ..."</span><span class="token operator">&gt;</span>Da ba dee da ba daa<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

</div>

12. Đăng ký transition duration and easing curve

Trước đây khi thêm một transition bạn phải thêm 3 classes:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>... transition duration-150 ease-in-out<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Post<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>

Còn bây giờ bạn hãy đăng ký các effect trong config

// tailwind.config.js
module.exports = {
  // ...
  theme: {
    // ...
    transitionDuration: {
      DEFAULT: '150ms',
      // ...
    },
    transitionTimingFunction: {
      DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
      // ...
    },
  },
}

// tailwind.config.js

module.exports = {

// ...

theme: {

// ...

transitionDuration: {

DEFAULT: '150ms',

// ...

transitionTimingFunction: {

DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',

// ...

}

Ta sử dụng:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>... transition<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Post<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>

Và đương nhiên ta cũng có thể ghi đè thuộc tính nếu viết kiểu cũ:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>... transition duration-300 ease-out<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Post<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>

13. Không còn tương thích với IE11

Bạn nên cân nhắc sử dụng nếu dự án của mình có sử dụng IE11 nhé.

III. Tạm kết

TailwindCss v2 đã cải thiện khá nhiều tiện ích, còn các bạn thấy sao. Riêng mình thì vẫn đang chờ đợi một sự đột phá nữa từ Tailwind.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Tailwind CSS v2 có gì mới?

I. Lời mở đầu

II. Nội dung chính

1. Tailwindcss cung cấp bảng mã màu mới

2. Dark mode

3. Mở rộng 2XL breakpoint

4. Những tiện ích mới cho outline ring

5. Utility-friendly form styles

6. Mặc định line-heights theo font-size

7. Mở rộng spacing, typography, and opacity

8. Sử dụng @apply với mọi thứ

9. Thêm tiện ích mới cho text overflow

10. Mở rộng variants

11. Khai báo group-hover and focus-within

12. Đăng ký transition duration and easing curve

13. Không còn tương thích với IE11

III. Tạm kết

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript