Skip to content

SharathHebbar/Tailwind-CSS-Tutorial

Repository files navigation

Tailwind CSS

Demo playground

page 1 page 2 page 3

  • Pre-defined

  • Easier than CSS

  • Can create custom css (it uses JIT Just in time) //text-[50px] custom entity

  • Position

    • Relative
    • Absolute
    • Fixed
    • Sticky
  • Display: controls how the elements are displayed

    • Block
    • Inline
    • Inline block
    • None
    • Flex
    • Grid
  • Media Queries

    • Responsive design
  • Hover

  • Unordered List

  • Dark and light mode

  • Custom elements

    • Use it in square brackets [] easy way but not suitable for large projects
    • Use config file to record that
  • Write clean code by avoiding complexity to html tags

    • Break your code into several components
    • Use directives
    • Use component libraries
    • Shadcn, tailwind UI, headless UI for commonly used components like buttons inputs