[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-en-1-1-all-ep1-what-is-tailwind-css-utility-first-framework-all--*":3,"academy-blog-translations-kp7ggg8huwjyhz8":84},{"data":4,"page":83,"perPage":83,"totalItems":83,"totalPages":83},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":78,"keywords":79,"locale":54,"published_at":80,"scheduled_at":13,"school_blog":75,"short_description":81,"status":73,"title":6,"updated":82,"updated_by":13,"slug":76,"views":77},"EP 1: What is Tailwind CSS? Why Developers Worldwide Are Obsessed - Your Journey to Becoming a Pro","sclblg987654321","school_blog_translations","\u003Cp>Have you ever experienced this? Spending all day writing CSS, but the results aren't what you wanted. Or sometimes you get it looking perfect, but when you open it on mobile, the layout completely breaks. If this sounds like you, believe me, you're not alone.\u003C\u002Fp>\u003Cp>But what if I told you there's a CSS framework that can solve all these problems and make you build beautiful websites 10x faster? Would you believe me?\u003C\u002Fp>\u003Cp>That's Tailwind CSS - the framework that's revolutionizing the web development world and captivating developers globally. According to npm trends statistics, Tailwind CSS has been growing consistently and gaining popularity rapidly over the past few years.\u003C\u002Fp>\u003Cp>Today we'll learn what Tailwind CSS is, why it's special, and how you can get started using it. Let's begin!\u003C\u002Fp>\u003Ch2>What is Tailwind CSS? Understand it Clearly in 5 Minutes\u003C\u002Fh2>\u003Ch3>Definition and Core Principles\u003C\u002Fh3>\u003Cp>Tailwind CSS is a Utility-First CSS Framework that changes how we think about writing CSS. Instead of writing component-specific classes in separate files, we use small, multiple classes to compose the designs we want.\u003C\u002Fp>\u003Cp>Let's look at a comparison:\u003C\u002Fp>\u003Ch3>Traditional CSS:\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* styles.css *\u002F\n.button {\n  background-color: #3b82f6;\n  color: white;\n  padding: 0.5rem 1rem;\n  border-radius: 0.25rem;\n  border: none;\n  cursor: pointer;\n}\n\n.button:hover {\n  background-color: #2563eb;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cpre>\u003Ccode class=\"language-html\"><button class=\"button\">Click me<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Tailwind CSS:\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><button class=\"bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600\">\n  Click me\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>See that? With Tailwind CSS, we don't need to write separate CSS files at all. Just add the classes we need to the HTML and get the same result.\u003C\u002Fp>\u003Ch3>Why is it Called \"Utility-First\"?\u003C\u002Fh3>\u003Cp>\"Utility-First\" means using CSS classes that have specific, single purposes (Utilities) to compose designs, instead of writing complex CSS classes.\u003C\u002Fp>\u003Ch3>Basic Utility Class Examples:\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>bg-blue-500\u003C\u002Fcode> = background-color: #3b82f6\u003C\u002Fli>\u003Cli>\u003Ccode>text-white\u003C\u002Fcode> = color: white\u003C\u002Fli>\u003Cli>\u003Ccode>px-4\u003C\u002Fcode> = padding-left: 1rem; padding-right: 1rem\u003C\u002Fli>\u003Cli>\u003Ccode>py-2\u003C\u002Fcode> = padding-top: 0.5rem; padding-bottom: 0.5rem\u003C\u002Fli>\u003Cli>\u003Ccode>rounded\u003C\u002Fcode> = border-radius: 0.25rem\u003C\u002Fli>\u003Cli>\u003Ccode>hover:bg-blue-600\u003C\u002Fcode> = background-color: #2563eb (on hover)\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>Benefits of this approach:\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Speed\u003C\u002Fstrong>: No need to think of new class names\u003C\u002Fli>\u003Cli>\u003Cstrong>Flexibility\u003C\u002Fstrong>: Easy to customize\u003C\u002Fli>\u003Cli>\u003Cstrong>Understandable\u003C\u002Fstrong>: Read and immediately know what it does\u003C\u002Fli>\u003Cli>\u003Cstrong>No duplication\u003C\u002Fstrong>: No duplicate CSS problems\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Here's an example of creating a simple card:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"bg-white rounded-lg shadow-md p-6 max-w-sm\">\n  <img class=\"w-full h-48 object-cover rounded-t-lg\" src=\"image.jpg\" alt=\"Image\">\n  <div class=\"pt-4\">\n    <h2 class=\"text-xl font-bold text-gray-800\">Card Title<\u002Fh2>\n    <p class=\"text-gray-600 mt-2\">Lorem ipsum dolor sit amet consectetur...<\u002Fp>\n    <button class=\"bg-blue-500 text-white px-4 py-2 rounded mt-4 hover:bg-blue-600 transition\">\n      Read More\n    <\u002Fbutton>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Tailwind CSS vs Bootstrap: The Battle of the Era\u003C\u002Fh2>\u003Ch3>Advantages of Tailwind CSS\u003C\u002Fh3>\u003Ch3>1. Smaller File Size (with PurgeCSS)\u003C\u002Fh3>\u003Cp>Tailwind CSS comes with a PurgeCSS system that removes unused classes from the final CSS file, making the file smaller.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Tailwind CSS\u003C\u002Fstrong>: ~10-30KB (after purge)\u003C\u002Fli>\u003Cli>\u003Cstrong>Bootstrap 5\u003C\u002Fstrong>: ~25-30KB (minified + gzipped)\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>2. Design Flexibility\u003C\u002Fh3>\u003Cp>Bootstrap has pre-built components that make many websites look similar, but Tailwind gives much more design freedom.\u003C\u002Fp>\u003Ch3>3. No Need to Write Additional CSS\u003C\u002Fh3>\u003Cp>With the Utility Classes system covering almost all use cases, you don't need to write additional CSS 80% of the time.\u003C\u002Fp>\u003Ch3>4. Better Performance\u003C\u002Fh3>\u003Cul>\u003Cli>No unnecessary CSS\u003C\u002Fli>\u003Cli>No CSS conflicts\u003C\u002Fli>\u003Cli>Faster loading times\u003C\u002Fli>\u003Cli>Supports JIT (Just-In-Time) compilation\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>Disadvantages to Know\u003C\u002Fh3>\u003Ch3>1. Learning Curve\u003C\u002Fh3>\u003Cp>Initially, you need to learn all new class names, which may take time to adjust.\u003C\u002Fp>\u003Ch3>2. HTML May Look Messy at First\u003C\u002Fh3>\u003Cp>Using multiple classes in one line may make HTML look cluttered.\u003C\u002Fp>\u003Ch3>3. Need to Remember Many Classes\u003C\u002Fh3>\u003Cp>Despite good documentation, memorizing frequently used classes is still necessary.\u003C\u002Fp>\u003Ch3>Comparison with Bootstrap\u003C\u002Fh3>\u003Cfigure class=\"table\">\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Feature\u003C\u002Fth>\u003Cth>Tailwind CSS\u003C\u002Fth>\u003Cth>Bootstrap\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>File Size\u003C\u002Ftd>\u003Ctd>~10-30KB\u003C\u002Ftd>\u003Ctd>~25-30KB\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Customization\u003C\u002Ftd>\u003Ctd>Highly flexible\u003C\u002Ftd>\u003Ctd>Limited but easy\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Learning Curve\u003C\u002Ftd>\u003Ctd>Moderate\u003C\u002Ftd>\u003Ctd>Easy\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Components\u003C\u002Ftd>\u003Ctd>Build yourself\u003C\u002Ftd>\u003Ctd>Pre-built\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Performance\u003C\u002Ftd>\u003Ctd>Excellent\u003C\u002Ftd>\u003Ctd>Good\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Popularity\u003C\u002Ftd>\u003Ctd>Growing fast\u003C\u002Ftd>\u003Ctd>Popular for years\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Ffigure>\u003Ch3>Button Creation Comparison:\u003C\u002Fh3>\u003Ch3>Bootstrap:\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><button class=\"btn btn-primary\">Primary Button<\u002Fbutton>\n<button class=\"btn btn-secondary\">Secondary Button<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Tailwind CSS:\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><button class=\"bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600\">\n  Primary Button\n<\u002Fbutton>\n<button class=\"bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600\">\n  Secondary Button\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Installing Tailwind CSS in 3 Ways\u003C\u002Fh2>\u003Ch3>Method 1: Using CDN (Easiest Start)\u003C\u002Fh3>\u003Cp>This method is suitable for testing or small projects:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Tailwind CSS Test<\u002Ftitle>\n    <script src=\"https:\u002F\u002Fcdn.tailwindcss.com\"><\u002Fscript>\n<\u002Fhead>\n<body>\n    <div class=\"bg-blue-500 text-white p-4\">\n        <h1 class=\"text-2xl font-bold\">Hello Tailwind CSS!<\u002Fh1>\n    <\u002Fdiv>\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Pros:\u003C\u002Fh3>\u003Cul>\u003Cli>Works immediately\u003C\u002Fli>\u003Cli>No additional installation needed\u003C\u002Fli>\u003Cli>Perfect for testing\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>Cons:\u003C\u002Fh3>\u003Cul>\u003Cli>Large file size (no PurgeCSS)\u003C\u002Fli>\u003Cli>Cannot customize\u003C\u002Fli>\u003Cli>Not suitable for production\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>Method 2: Install via NPM\u003C\u002Fh3>\u003Cp>This method is suitable for real projects that need customization and good performance:\u003C\u002Fp>\u003Ch3>Step 1: Install Tailwind CSS\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-bash\">npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Step 2: Configure Settings\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js\nmodule.exports = {\n  content: [\n    \".\u002Fsrc\u002F**\u002F*.{html,js}\",\n    \".\u002Fpages\u002F**\u002F*.{html,js}\",\n    \".\u002Fcomponents\u002F**\u002F*.{html,js}\",\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Step 3: Add Tailwind Directives\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* src\u002Finput.css *\u002F\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Step 4: Build CSS\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-bash\">npx tailwindcss -i .\u002Fsrc\u002Finput.css -o .\u002Fdist\u002Foutput.css --watch\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Method 3: Using Tailwind CLI\u003C\u002Fh3>\u003Cp>A newer method that's easier than using NPM:\u003C\u002Fp>\u003Ch3>Step 1: Download Tailwind CLI\u003C\u002Fh3>\u003Cp>Go to \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Ftailwindcss\u002Freleases\">https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Ftailwindcss\u002Freleases\u003C\u002Fa> and download the appropriate file for your operating system.\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-bash\"># macOS\u002FLinux example\ncurl -sLO https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Ftailwindcss\u002Freleases\u002Flatest\u002Fdownload\u002Ftailwindcss-macos-x64\nchmod +x tailwindcss-macos-x64\nmv tailwindcss-macos-x64 tailwindcss\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Step 2: Initialize Configuration\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-bash\">.\u002Ftailwindcss init\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Step 3: Build CSS\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-bash\">.\u002Ftailwindcss -i input.css -o output.css --watch\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>First Try: Create a Simple Web Page\u003C\u002Fh2>\u003Ch3>Basic HTML Structure\u003C\u002Fh3>\u003Cp>Let's create our first web page:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>My First Website<\u002Ftitle>\n    <script src=\"https:\u002F\u002Fcdn.tailwindcss.com\"><\u002Fscript>\n<\u002Fhead>\n<body class=\"bg-gray-100\">\n    <!-- Content will be added in next steps -->\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Create Basic Components\u003C\u002Fh3>\u003Ch3>1. Header and Navigation\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><header class=\"bg-white shadow-sm\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div class=\"flex justify-between items-center py-6\">\n            <div class=\"flex items-center\">\n                <h1 class=\"text-2xl font-bold text-gray-900\">My Website<\u002Fh1>\n            <\u002Fdiv>\n            <nav class=\"hidden md:flex space-x-8\">\n                <a href=\"#\" class=\"text-gray-600 hover:text-gray-900\">Home<\u002Fa>\n                <a href=\"#\" class=\"text-gray-600 hover:text-gray-900\">About<\u002Fa>\n                <a href=\"#\" class=\"text-gray-600 hover:text-gray-900\">Contact<\u002Fa>\n            <\u002Fnav>\n        <\u002Fdiv>\n    <\u002Fdiv>\n<\u002Fheader>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>2. Hero Section\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><section class=\"bg-blue-600 text-white\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24\">\n        <div class=\"text-center\">\n            <h1 class=\"text-4xl md:text-6xl font-bold mb-6\">\n                Welcome to My Website\n            <\u002Fh1>\n            <p class=\"text-xl md:text-2xl mb-8\">\n                Creating amazing experiences with Tailwind CSS\n            <\u002Fp>\n            <button class=\"bg-white text-blue-600 px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition\">\n                Get Started\n            <\u002Fbutton>\n        <\u002Fdiv>\n    <\u002Fdiv>\n<\u002Fsection>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>3. Card Components\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><section class=\"py-16\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n            <div class=\"bg-white rounded-lg shadow-md p-6\">\n                <div class=\"w-12 h-12 bg-blue-500 rounded-lg mb-4\"><\u002Fdiv>\n                <h3 class=\"text-xl font-semibold mb-2\">Fast<\u002Fh3>\n                <p class=\"text-gray-600\">Build faster with utility-first CSS framework<\u002Fp>\n            <\u002Fdiv>\n            <div class=\"bg-white rounded-lg shadow-md p-6\">\n                <div class=\"w-12 h-12 bg-green-500 rounded-lg mb-4\"><\u002Fdiv>\n                <h3 class=\"text-xl font-semibold mb-2\">Flexible<\u002Fh3>\n                <p class=\"text-gray-600\">Customize everything to match your design<\u002Fp>\n            <\u002Fdiv>\n            <div class=\"bg-white rounded-lg shadow-md p-6\">\n                <div class=\"w-12 h-12 bg-purple-500 rounded-lg mb-4\"><\u002Fdiv>\n                <h3 class=\"text-xl font-semibold mb-2\">Modern<\u002Fh3>\n                <p class=\"text-gray-600\">Built for modern web development<\u002Fp>\n            <\u002Fdiv>\n        <\u002Fdiv>\n    <\u002Fdiv>\n<\u002Fsection>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Testing Responsive Design\u003C\u002Fh3>\u003Cp>Tailwind CSS makes creating responsive design very easy:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Example of using Responsive Classes -->\n<div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n    <!-- grid-cols-1 = 1 column on mobile -->\n    <!-- md:grid-cols-2 = 2 columns on tablet -->\n    <!-- lg:grid-cols-3 = 3 columns on desktop -->\n<\u002Fdiv>\n\n<h1 class=\"text-2xl md:text-4xl lg:text-6xl font-bold\">\n    <!-- text-2xl on mobile, text-4xl on tablet, text-6xl on desktop -->\n    Responsive Heading\n<\u002Fh1>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure class=\"image image_resized\" style=\"width:75%;\">\u003Cimg style=\"aspect-ratio:1920\u002F1920;\" src=\"https:\u002F\u002Fimagedelivery.net\u002Fg5Z0xlCQah-oO61sLqaEUA\u002FTemplate_Blog_1_11zon_2947456361\u002Ftwsme\" alt=\"Result\" width=\"1920\" height=\"1920\">\u003C\u002Ffigure>\u003Ch2>Basic Techniques You Should Know\u003C\u002Fh2>\u003Ch3>Class Naming System\u003C\u002Fh3>\u003Cp>Tailwind CSS has a consistent class naming system:\u003C\u002Fp>\u003Ch3>1. Spacing (padding, margin)\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- p = padding, m = margin -->\n<!-- t = top, b = bottom, l = left, r = right, x = left+right, y = top+bottom -->\n<div class=\"p-4\">padding: 1rem<\u002Fdiv>\n<div class=\"px-4 py-2\">padding: 0.5rem 1rem<\u002Fdiv>\n<div class=\"m-8\">margin: 2rem<\u002Fdiv>\n<div class=\"mt-4 mb-2\">margin-top: 1rem, margin-bottom: 0.5rem<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>2. Colors\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- bg = background, text = text color -->\n<!-- Colors have 9 levels: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 -->\n<div class=\"bg-blue-500 text-white\">Blue background, white text<\u002Fdiv>\n<div class=\"bg-red-100 text-red-800\">Light red background, dark red text<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>3. Typography\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, etc. -->\n<h1 class=\"text-4xl font-bold\">Large heading<\u002Fh1>\n<p class=\"text-base font-normal\">Normal paragraph<\u002Fp>\n<span class=\"text-sm text-gray-500\">Small muted text<\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>IntelliSense and VS Code Setup\u003C\u002Fh3>\u003Cp>To write Tailwind CSS faster, it's recommended to install extensions:\u003C\u002Fp>\u003Ch3>1. Tailwind CSS IntelliSense\u003C\u002Fh3>\u003Cul>\u003Cli>Auto-complete for Tailwind classes\u003C\u002Fli>\u003Cli>Shows CSS values for each class\u003C\u002Fli>\u003Cli>Detects errors\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>2. VS Code Settings\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-json\">\u002F\u002F settings.json\n{\n  \"tailwindCSS.includeLanguages\": {\n    \"html\": \"html\",\n    \"javascript\": \"javascript\",\n    \"typescript\": \"typescript\"\n  },\n  \"editor.quickSuggestions\": {\n    \"strings\": true\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>3. Useful Shortcuts\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>Ctrl + Space\u003C\u002Fcode>: Call auto-complete\u003C\u002Fli>\u003Cli>\u003Ccode>Ctrl + Click\u003C\u002Fcode>: See CSS value of class\u003C\u002Fli>\u003Cli>\u003Ccode>F12\u003C\u002Fcode>: Go to definition\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>Cheat Sheet for Beginners\u003C\u002Fh3>\u003Cp>Most frequently used classes:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Layout -->\n<div class=\"flex items-center justify-center\">Flexbox center<\u002Fdiv>\n<div class=\"grid grid-cols-3 gap-4\">Grid 3 columns<\u002Fdiv>\n\n<!-- Spacing -->\n<div class=\"p-4 m-2\">Padding 1rem, margin 0.5rem<\u002Fdiv>\n\n<!-- Colors -->\n<div class=\"bg-blue-500 text-white\">Blue background<\u002Fdiv>\n\n<!-- Typography -->\n<h1 class=\"text-2xl font-bold\">Large bold heading<\u002Fh1>\n\n<!-- Borders -->\n<div class=\"border border-gray-300 rounded-lg\">Border with rounded corners<\u002Fdiv>\n\n<!-- Shadows -->\n<div class=\"shadow-md\">Medium shadow<\u002Fdiv>\n\n<!-- Responsive -->\n<div class=\"hidden md:block\">Hide on mobile, show on desktop<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Common Beginner Mistakes\u003C\u002Fh2>\u003Ch3>Common Errors\u003C\u002Fh3>\u003Ch3>1. Using Overlapping Classes\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Wrong -->\n<div class=\"p-4 px-6\">\n  <!-- px-6 will override padding-left and padding-right of p-4 -->\n  <!-- Result: padding: 1rem 1.5rem (not 1rem all around) -->\n<\u002Fdiv>\n\n<!-- Correct -->\n<div class=\"py-4 px-6\">\n  <!-- padding: 1rem 1.5rem as intended -->\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>2. Not Understanding Box Model\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- May not work as expected -->\n<div class=\"w-64 p-4 border-2\">\n    <!-- Total width will be 256px + 32px + 4px = 292px -->\n<\u002Fdiv>\n\n<!-- Use box-border to include border and padding in size -->\n<div class=\"w-64 p-4 border-2 box-border\">\n    <!-- Total width will be exactly 256px -->\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>3. Forgetting to Use Responsive Classes\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Not responsive -->\n<div class=\"flex\">\n    <div class=\"w-1\u002F2\">Left<\u002Fdiv>\n    <div class=\"w-1\u002F2\">Right<\u002Fdiv>\n<\u002Fdiv>\n\n<!-- Responsive -->\n<div class=\"flex flex-col md:flex-row\">\n    <div class=\"w-full md:w-1\u002F2\">Left<\u002Fdiv>\n    <div class=\"w-full md:w-1\u002F2\">Right<\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>How to Fix and Avoid\u003C\u002Fh3>\u003Ch3>1. Use Browser DevTools\u003C\u002Fh3>\u003Cul>\u003Cli>Check if classes are actually working\u003C\u002Fli>\u003Cli>See which classes are being overridden\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>2. Read Documentation\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Ftailwindcss.com\u002F\">tailwindcss.com\u003C\u002Fa> has excellent documentation\u003C\u002Fli>\u003Cli>Complete usage examples\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>3. Use Tailwind UI\u003C\u002Fh3>\u003Cul>\u003Cli>Ready-made component examples\u003C\u002Fli>\u003Cli>Learn from expert-written code\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>4. Helpful Tools\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Tailwind CSS IntelliSense\u003C\u002Fstrong>: Auto-complete\u003C\u002Fli>\u003Cli>\u003Cstrong>Headwind\u003C\u002Fstrong>: Organize classes neatly\u003C\u002Fli>\u003Cli>\u003Cstrong>Tailwind CSS Cheat Sheet\u003C\u002Fstrong>: Reference for frequently used classes\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>Advanced Features You Should Know\u003C\u002Fh3>\u003Ch3>1. JIT (Just-In-Time) Compilation\u003C\u002Fh3>\u003Cp>Modern Tailwind CSS uses JIT compilation that generates only the classes actually used, making:\u003C\u002Fp>\u003Cul>\u003Cli>Faster builds\u003C\u002Fli>\u003Cli>Smaller files\u003C\u002Fli>\u003Cli>Ability to use any value like \u003Ccode>w-[123px]\u003C\u002Fcode>\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>2. Custom Properties and @apply\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">@layer components {\n  .btn-primary {\n    @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>3. Dark Mode\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"bg-white dark:bg-gray-800 text-black dark:text-white\">\n  Content that adapts to dark mode\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Chr>\u003Ch3>Summary\u003C\u002Fh3>\u003Cp>Tailwind CSS is more than just a regular CSS framework. It's a tool that will change the way you think about writing CSS forever. With the Utility-First concept that makes you build websites faster, more flexibly, and with better performance.\u003C\u002Fp>\u003Ch3>What we learned in EP 1:\u003C\u002Fh3>\u003Cul>\u003Cli>Tailwind CSS is a Utility-First Framework that uses small, multiple classes composed together\u003C\u002Fli>\u003Cli>Has many advantages like small files, flexibility, no need to write additional CSS\u003C\u002Fli>\u003Cli>Can be installed in 3 ways: CDN, NPM, or CLI\u003C\u002Fli>\u003Cli>Has basic techniques you should know before starting\u003C\u002Fli>\u003Cli>Supports advanced features like JIT compilation and Dark Mode\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>EP 2\u003C\u002Fstrong> \"What is Utility-First? Master Tailwind's Class System Like a Pro\" we'll dive deep into Tailwind CSS's class system, learn how to use each category, and techniques for memorizing frequently used classes so you can write Tailwind CSS professionally.\u003C\u002Fp>\u003Cp>If you're interested in learning more about Web Development, CSS Frameworks, and web development technologies, subscribe to Superdev School! We have high-quality courses and articles that will help elevate your programming skills.\u003C\u002Fp>\u003Ch3>Read more\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FGolang\">\u003Cstrong>Golang The Series\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FJS2GO\">\u003Cstrong>JS2GO\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fen\u002Fblogs\u002Fcategories\u002FTailwind%20CSS\">\u003Cstrong>10 Eps That Will Make You a Pro Tailwind CSS Overnight\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>🔵 Facebook: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.facebook.com\u002Fsuperdev.school.th\">\u003Cstrong>Superdev School  (Superdev)\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>📸 Instagram: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.instagram.com\u002Fsuperdevschool\u002F\">\u003Cstrong>superdevschool\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🎬 TikTok: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.tiktok.com\u002F@superdevschool\">\u003Cstrong>superdevschool\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🌐 Website: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002F\">\u003Cstrong>www.superdev.school\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Chr>\u003Ch2>Additional Resources and Recommended Tools\u003C\u002Fh2>\u003Ch3>Official Resources\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Tailwind CSS Documentation\u003C\u002Fstrong>: \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Ftailwindcss.com\u002F\">https:\u002F\u002Ftailwindcss.com\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Cstrong>Tailwind UI\u003C\u002Fstrong>: \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Ftailwindui.com\u002F\">https:\u002F\u002Ftailwindui.com\u003C\u002Fa> (Premium component library)\u003C\u002Fli>\u003Cli>\u003Cstrong>Headless UI\u003C\u002Fstrong>: \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fheadlessui.com\u002F\">https:\u002F\u002Fheadlessui.com\u003C\u002Fa> (Unstyled components)\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>Useful Tools\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Tailwind CSS IntelliSense\u003C\u002Fstrong> (VS Code Extension)\u003C\u002Fli>\u003Cli>\u003Cstrong>Tailwind CSS Cheat Sheet\u003C\u002Fstrong>: \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fnerdcave.com\u002Ftailwind-cheat-sheet\">https:\u002F\u002Fnerdcave.com\u002Ftailwind-cheat-sheet\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Cstrong>Tailwind Play\u003C\u002Fstrong>: \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fplay.tailwindcss.com\u002F\">https:\u002F\u002Fplay.tailwindcss.com\u003C\u002Fa> (Online playground)\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>Community and Learning Resources\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Tailwind CSS Discord\u003C\u002Fstrong>: Tailwind CSS user community\u003C\u002Fli>\u003Cli>\u003Cstrong>YouTube Channels\u003C\u002Fstrong>: Tailwind Labs, Traversy Media, The Net Ninja\u003C\u002Fli>\u003Cli>\u003Cstrong>GitHub Examples\u003C\u002Fstrong>: Real project examples using Tailwind CSS\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Ready to change the way you write CSS? Let's get started with Tailwind CSS!\u003C\u002Fp>","2_11zon_11_89zskq05bv.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002F2b3ettpehwyavdi\u002F2_11zon_11_89zskq05bv.webp","2026-03-04 08:26:55.798Z","",{"keywords":15,"locale":48,"school_blog":58},[16,23,28,33,38,43],{"collectionId":17,"collectionName":18,"created":19,"created_by":13,"id":20,"name":21,"updated":22,"updated_by":13},"sclkey987654321","school_keywords","2026-03-04 08:26:52.948Z","uoyk7h868r34o3a","Web Design","2026-04-10 16:07:35.963Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:19:55.412Z","hz7yzm54i2o6cl7","web development","2026-04-10 16:07:24.402Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:26:53.730Z","r9l0awn967x2y3m","Bootstrap vs Tailwind","2026-04-10 16:07:36.243Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:26:45.284Z","4rzdk0vis9kf77i","CSS Framework","2026-04-10 16:07:34.310Z",{"collectionId":17,"collectionName":18,"created":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:26:51.076Z","jn88tu5uo8a2bjj","Utility-First CSS","2026-04-10 16:07:35.460Z",{"collectionId":17,"collectionName":18,"created":44,"created_by":13,"id":45,"name":46,"updated":47,"updated_by":13},"2026-03-04 08:26:35.002Z","eq1u1plwlvvr2rh","Tailwind CSS","2026-04-10 16:07:31.210Z",{"code":49,"collectionId":50,"collectionName":51,"created":52,"flag":53,"id":54,"is_default":55,"label":56,"updated":57},"en","pbc_1989393366","locales","2026-01-22 11:00:02.726Z","twemoji:flag-united-states","qv9c1llfov2d88z",false,"English","2026-04-10 15:42:46.825Z",{"category":59,"collectionId":60,"collectionName":61,"created":13,"expand":62,"id":75,"slug":76,"updated":13,"views":77},"i22e96fj41lsws7","pbc_2105096300","school_blogs",{"category":63},{"blogIds":64,"collectionId":65,"collectionName":66,"created":67,"created_by":13,"id":59,"image":68,"image_alt":13,"image_path":69,"label":70,"name":46,"priority":71,"publish_at":72,"scheduled_at":13,"status":73,"updated":74,"updated_by":13},[],"sclcatblg987654321","school_category_blogs","2026-03-04 08:26:33.946Z","vzv2yduhfk_hs035tvsww.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclcatblg987654321\u002Fi22e96fj41lsws7\u002Fvzv2yduhfk_hs035tvsww.webp",{"en":46,"th":46},10,"2025-07-25 05:27:14.926Z","published","2026-04-25 02:32:14.403Z","kp7ggg8huwjyhz8","ep1-what-is-tailwind-css-utility-first-framework",226,"2b3ettpehwyavdi",[20,25,30,35,40,45],"2025-07-18 02:15:05.941Z","Start learning Tailwind CSS - the Utility-First CSS Framework that's changing how developers worldwide think about writing CSS. Compare with Bootstrap, learn 3 installation methods, and begin your journey to becoming a Tailwind CSS pro in 10 episodes.","2026-05-12 01:14:31.673Z",1,{"th":76,"en":76}]