{"id":3938,"date":"2026-10-19T18:01:31","date_gmt":"2026-10-19T11:01:31","guid":{"rendered":"https:\/\/sumberlaba.com\/index.php\/2026\/10\/19\/how-to-use-tailwind-css-a-practical-beginners-tutorial\/"},"modified":"2026-10-19T18:01:31","modified_gmt":"2026-10-19T11:01:31","slug":"how-to-use-tailwind-css-a-practical-beginners-tutorial","status":"publish","type":"post","link":"https:\/\/sumberlaba.com\/index.php\/2026\/10\/19\/how-to-use-tailwind-css-a-practical-beginners-tutorial\/","title":{"rendered":"How to Use Tailwind CSS: A Practical Beginner’s Tutorial"},"content":{"rendered":"

How to Use Tailwind CSS: A Practical Beginner’s Tutorial<\/h1>\n

Tailwind CSS is a utility-first framework that lets you style interfaces directly in your HTML. Instead of writing custom CSS, you compose small classes like flex<\/code>, p-4<\/code>, and text-blue-600<\/code>. This guide shows the fastest way to set it up and use it in a real project.<\/p>\n

1. Install and Configure Tailwind<\/h2>\n

Create a project and install Tailwind via npm. For Tailwind v3, run npm install -D tailwindcss<\/code> and npx tailwindcss init<\/code>. Then open tailwind.config.js<\/code> and add your template paths to the content<\/code> array, such as \".\/src\/**\/*.{html,js}\"<\/code>.<\/p>\n

\"Article<\/p>\n

2. Add Tailwind to Your CSS<\/h2>\n

Create a CSS file and import the three core layers:<\/p>\n

    \n
  • @tailwind base;<\/code><\/li>\n
  • @tailwind components;<\/code><\/li>\n
  • @tailwind utilities;<\/code><\/li>\n<\/ul>\n

    Run the Tailwind CLI to scan your files and generate the final stylesheet, or add it to your build tool like Vite, Next.js, or PostCSS.<\/p>\n

    3. Use Utility Classes in HTML<\/h2>\n

    Apply classes directly to elements. For example, a card might use bg-white p-6 rounded-lg shadow-md<\/code>.<\/p>\n

    Responsive and State Variants<\/h3>\n

    Add responsive prefixes like md:flex<\/code> and state variants like hover:bg-blue-700<\/code>. Tailwind only includes classes you actually use in production.<\/p>\n

    4. Reuse Styles with @apply<\/h2>\n

    For repeated patterns, create component classes in CSS with @apply<\/code>. This keeps markup cleaner while preserving Tailwind’s utility system.<\/p>\n

    Tailwind CSS speeds up development once you learn its class names. Start small, use the docs, and build a consistent design system without leaving your HTML.<\/p>\n","protected":false},"excerpt":{"rendered":"

    How to Use Tailwind CSS: A Practical Beginner’s Tutorial Tailwind CSS is a utility-first framework that lets you style interfaces directly in your HTML. Instead of writing custom CSS, you compose small classes like flex, p-4, and text-blue-600. This guide shows the fastest way to set it up and use it in a real project. … <\/p>\n","protected":false},"author":2716,"featured_media":3937,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3938","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-non-category"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts\/3938","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/users\/2716"}],"replies":[{"embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/comments?post=3938"}],"version-history":[{"count":1,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts\/3938\/revisions"}],"predecessor-version":[{"id":3939,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts\/3938\/revisions\/3939"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/media\/3937"}],"wp:attachment":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/media?parent=3938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/categories?post=3938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/tags?post=3938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}