😍Tailwind Cheat Sheet (ok)

https://nerdcave.com/tailwind-cheat-sheet

Tài liệu chuẩn vẫn là cái này https://tailwindcss.com/docs/container

Đi trả lời câu hỏi tại sao sử dụng tailwind dung lượng sẽ ít hơn khi sử dụng bootstrapt

Chú ý: Khi sử dụng bản build ra nó sẽ chỉ buid những class dùng trong page, còn khi sử dụng bản dev thì nó vẫn sử dụng bình thường

container

className="sm:container"

Sự thực khi sử dụng class nào thì nó sẽ build ra class đó sử dụng

Trong trường hợp trên nếu ta sử dụng class sm:container khi đưa class container vào nó sẽ không hoạt động khi build ra sản phẩm 😍

Khi kiểm tra bản build nó không có class container 😒 đó lày lý do tại sao dung lượng sẽ nhỏ hơn

Customizing

Phần này khá quan trọng chúng ta có thể tùy chỉnh theo ý muốn của chúng ta

— Customizing Theme

src\App.js

export default function App( ) {
  return (
    <div className="lionel:container">
      bg-sky-700
    </div>
  )
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    screens: {
      lionel: '1234px',
    },
  },
  plugins: [],
}

— Customizing Spacing

src\App.js

export default function App( ) {
  return (
    <div className="px-1.1">
      bg-sky-700
    </div>
  )
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    spacing: {
      '1.1': '1px'
    }
  },
  plugins: [],
}

— Customizing Color

src\App.js

export default function App( ) {
  return (
    <div className="text-lionel">
      bg-sky-700
    </div>
  )
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    colors: {
      'lionel': '#78dcca'
    }
  },
  plugins: [],
}

— Customizing Plugin [addComponents]

src\App.js

export default function App( ) {
  return (
    <div className="typography-heading3">
      bg-sky-700
    </div>
  )
}

src\styles\typography.ts

import plugin from 'tailwindcss/plugin';
export default plugin(({ addComponents, theme}) => {
  addComponents({
    // Headings
    '.typography-heading3': {
      fontSize: theme('fontSize.lg'),
      lineHeight: '26px',
      fontFamily: theme('fontFamily.heading'),
      fontWeight: theme('fontWeight.semibold'),
      '@screen md': {
        fontSize: '24px',
        lineHeight: '32px',
      },
    }
  })
  }
);

tailwind.config.js

/** @type {import('tailwindcss').Config} */
const typographyPlugin = require('./src/styles/typography');
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  plugins: [typographyPlugin]
};

src\App.js

export default function App( ) {
  return (
    <div className="typography-heading3">
      bg-sky-700
    </div>
  )
}