[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-en-1-1-all-tailwind-css-component-system-apply-directive-tutorial-ep7-all--*":3,"academy-blog-translations-tt7uw2utkkgax7m":74},{"data":4,"page":73,"perPage":73,"totalItems":73,"totalPages":73},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":68,"keywords":69,"locale":44,"published_at":70,"scheduled_at":13,"school_blog":65,"short_description":71,"status":63,"title":6,"updated":72,"updated_by":13,"slug":66,"views":67},"EP 7: Stop Writing Repetitive Code! Create Components with @apply and Custom CSS","sclblg987654321","school_blog_translations","\u003Cp>Many developers who start using Tailwind CSS encounter the same problem: HTML that looks cluttered and verbose, and having to write the same classes over and over again. For example, creating a blue button requires typing \u003Ccode>px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors\u003C\u002Fcode> every single time.\u003C\u002Fp>\u003Cp>But did you know that Tailwind CSS has powerful tools to solve this problem? Today we'll learn how to use \u003Ccode>@apply\u003C\u002Fcode> and component creation techniques that will make you code faster, maintain easier, while keeping the flexibility of Tailwind CSS intact.\u003C\u002Fp>\u003Ch2>Understanding the @apply Directive\u003C\u002Fh2>\u003Cp>\u003Ccode>@apply\u003C\u002Fcode> is a special tool in Tailwind CSS that allows us to combine multiple utility classes into a single class, enabling us to create reusable components.\u003C\u002Fp>\u003Ch3>Basic Principles of @apply\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* Create basic buttons with @apply *\u002F\n.btn {\n  @apply px-6 py-3 font-semibold rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;\n}\n\n.btn-primary {\n  @apply bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500;\n}\n\n.btn-secondary {\n  @apply bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500;\n}\n\n.btn-danger {\n  @apply bg-red-500 text-white hover:bg-red-600 focus:ring-red-500;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Usage in HTML -->\n<button class=\"btn btn-primary\">Primary Button<\u002Fbutton>\n<button class=\"btn btn-secondary\">Secondary Button<\u002Fbutton>\n<button class=\"btn btn-danger\">Delete Button<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Benefits of Using @apply\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Cleaner HTML:\u003C\u002Fstrong> Reduces the length of class attributes\u003C\u002Fli>\u003Cli>\u003Cstrong>Easy Maintenance:\u003C\u002Fstrong> Edit once, apply everywhere\u003C\u002Fli>\u003Cli>\u003Cstrong>Design System Creation:\u003C\u002Fstrong> Clear standards and consistency\u003C\u002Fli>\u003Cli>\u003Cstrong>Maintained Flexibility:\u003C\u002Fstrong> Can still add utility classes as needed\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>When to Use @apply\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* ✅ Good - Frequently used patterns *\u002F\n.card {\n  @apply bg-white rounded-lg shadow-md p-6 border border-gray-200;\n}\n\n.input-field {\n  @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500;\n}\n\n\u002F* ❌ Bad - Used only once *\u002F\n.unique-element {\n  @apply text-red-500 font-bold;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Building a Professional Component System\u003C\u002Fh2>\u003Ch3>Button Components\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* Base Button *\u002F\n.btn {\n  @apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;\n}\n\n\u002F* Button Sizes *\u002F\n.btn-sm {\n  @apply px-3 py-1.5 text-sm;\n}\n\n.btn-md {\n  @apply px-4 py-2 text-base;\n}\n\n.btn-lg {\n  @apply px-6 py-3 text-lg;\n}\n\n\u002F* Button Variants *\u002F\n.btn-solid {\n  @apply shadow-sm;\n}\n\n.btn-outline {\n  @apply border-2 bg-transparent;\n}\n\n\u002F* Button Colors *\u002F\n.btn-blue {\n  @apply bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500;\n}\n\n.btn-blue.btn-outline {\n  @apply border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white;\n}\n\n.btn-green {\n  @apply bg-green-500 text-white hover:bg-green-600 focus:ring-green-500;\n}\n\n.btn-green.btn-outline {\n  @apply border-green-500 text-green-500 hover:bg-green-500 hover:text-white;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Button System Usage -->\n<div class=\"space-y-4\">\n  <!-- Different sizes -->\n  <div class=\"space-x-2\">\n    <button class=\"btn btn-sm btn-solid btn-blue\">Small<\u002Fbutton>\n    <button class=\"btn btn-md btn-solid btn-blue\">Medium<\u002Fbutton>\n    <button class=\"btn btn-lg btn-solid btn-blue\">Large<\u002Fbutton>\n  <\u002Fdiv>\n\n  <!-- Different variants -->\n  <div class=\"space-x-2\">\n    <button class=\"btn btn-md btn-solid btn-blue\">Solid<\u002Fbutton>\n    <button class=\"btn btn-md btn-outline btn-blue\">Outline<\u002Fbutton>\n  <\u002Fdiv>\n\n  <!-- Different colors -->\n  <div class=\"space-x-2\">\n    <button class=\"btn btn-md btn-solid btn-blue\">Blue<\u002Fbutton>\n    <button class=\"btn btn-md btn-solid btn-green\">Green<\u002Fbutton>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Card Components\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* Base Card *\u002F\n.card {\n  @apply bg-white rounded-lg shadow-md overflow-hidden;\n}\n\n.card-hover {\n  @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;\n}\n\n.card-bordered {\n  @apply border border-gray-200;\n}\n\n\u002F* Card Parts *\u002F\n.card-header {\n  @apply px-6 py-4 border-b border-gray-200 bg-gray-50;\n}\n\n.card-body {\n  @apply px-6 py-4;\n}\n\n.card-footer {\n  @apply px-6 py-4 border-t border-gray-200 bg-gray-50;\n}\n\n.card-image {\n  @apply w-full h-48 object-cover;\n}\n\n.card-title {\n  @apply text-xl font-semibold text-gray-800 mb-2;\n}\n\n.card-text {\n  @apply text-gray-600 leading-relaxed;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Card System Usage -->\n<div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n  <!-- Card with Header -->\n  <div class=\"card card-hover card-bordered\">\n    <div class=\"card-header\">\n      <h3 class=\"card-title\">Article Title<\u002Fh3>\n    <\u002Fdiv>\n    <div class=\"card-body\">\n      <p class=\"card-text\">\n        Interesting and useful article content for readers\n      <\u002Fp>\n    <\u002Fdiv>\n    <div class=\"card-footer\">\n      <button class=\"btn btn-sm btn-solid btn-blue\">Read More<\u002Fbutton>\n    <\u002Fdiv>\n  <\u002Fdiv>\n\n  <!-- Card with Image -->\n  <div class=\"card card-hover\">\n    <img class=\"card-image\" src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1518837695005-2083093ee35b?w=400\" alt=\"Card image\" loading=\"lazy\">\n    <div class=\"card-body\">\n      <h3 class=\"card-title\">Product Name<\u002Fh3>\n      <p class=\"card-text\">Interesting product details<\u002Fp>\n      <div class=\"mt-4 flex items-center justify-between\">\n        <span class=\"text-2xl font-bold text-blue-600\">$199<\u002Fspan>\n        <button class=\"btn btn-sm btn-solid btn-green\">Buy Now<\u002Fbutton>\n      <\u002Fdiv>\n    <\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Form Components\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* Form Elements *\u002F\n.form-group {\n  @apply mb-4;\n}\n\n.form-label {\n  @apply block text-sm font-medium text-gray-700 mb-2;\n}\n\n.form-input {\n  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors;\n}\n\n.form-input.error {\n  @apply border-red-300 focus:ring-red-500 focus:border-red-500;\n}\n\n.form-textarea {\n  @apply form-input resize-vertical min-h-[100px];\n}\n\n.form-select {\n  @apply form-input appearance-none bg-no-repeat bg-right pr-10;\n  background-image: url(\"data:image\u002Fsvg+xml,%3csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'\u002F%3e%3c\u002Fsvg%3e\");\n}\n\n.form-error {\n  @apply text-sm text-red-600 mt-1;\n}\n\n.form-help {\n  @apply text-sm text-gray-500 mt-1;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Form System Usage -->\n<form class=\"max-w-lg mx-auto space-y-6\">\n  <div class=\"form-group\">\n    <label class=\"form-label\" for=\"name\">Full Name<\u002Flabel>\n    <input class=\"form-input\" type=\"text\" id=\"name\" placeholder=\"Enter your name\">\n    <p class=\"form-help\">Please enter your real name<\u002Fp>\n  <\u002Fdiv>\n\n  <div class=\"form-group\">\n    <label class=\"form-label\" for=\"email\">Email<\u002Flabel>\n    <input class=\"form-input error\" type=\"email\" id=\"email\" placeholder=\"your@email.com\">\n    <p class=\"form-error\">Please enter a valid email address<\u002Fp>\n  <\u002Fdiv>\n\n  <div class=\"form-group\">\n    <label class=\"form-label\" for=\"country\">Country<\u002Flabel>\n    <select class=\"form-select\" id=\"country\">\n      <option>Select Country<\u002Foption>\n      <option>Thailand<\u002Foption>\n      <option>Singapore<\u002Foption>\n      <option>Malaysia<\u002Foption>\n    <\u002Fselect>\n  <\u002Fdiv>\n\n  <div class=\"form-group\">\n    <label class=\"form-label\" for=\"message\">Message<\u002Flabel>\n    <textarea class=\"form-textarea\" id=\"message\" placeholder=\"Write your message...\"><\u002Ftextarea>\n  <\u002Fdiv>\n\n  <button class=\"btn btn-lg btn-solid btn-blue w-full\">Submit<\u002Fbutton>\n<\u002Fform>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Managing Custom Utilities and Components\u003C\u002Fh2>\u003Ch3>Using @layer Correctly\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">@layer base {\n  \u002F* Reset and Base Styles *\u002F\n  html {\n    @apply scroll-smooth;\n  }\n  \n  body {\n    @apply font-sans text-gray-900 leading-relaxed;\n  }\n}\n\n@layer components {\n  \u002F* Component Classes *\u002F\n  .btn {\n    @apply px-4 py-2 font-medium rounded-lg transition-all duration-200;\n  }\n  \n  .card {\n    @apply bg-white rounded-lg shadow-md overflow-hidden;\n  }\n  \n  .glass-effect {\n    @apply backdrop-blur-sm bg-white\u002F80 border border-white\u002F20;\n  }\n}\n\n@layer utilities {\n  \u002F* Custom Utilities *\u002F\n  .scroll-snap-x {\n    scroll-snap-type: x mandatory;\n  }\n  \n  .scroll-snap-start {\n    scroll-snap-align: start;\n  }\n  \n  .text-shadow {\n    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Creating Responsive Components\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* Responsive Card *\u002F\n.card-responsive {\n  @apply bg-white rounded-lg shadow-md overflow-hidden;\n  @apply flex flex-col md:flex-row;\n}\n\n.card-responsive .card-image {\n  @apply w-full md:w-1\u002F3 h-48 md:h-auto object-cover;\n}\n\n.card-responsive .card-content {\n  @apply p-6 flex-1;\n}\n\n.card-responsive .card-title {\n  @apply text-xl font-semibold mb-2 md:text-2xl;\n}\n\n.card-responsive .card-text {\n  @apply text-gray-600 text-sm md:text-base;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Best Practices for Component Development\u003C\u002Fh2>\u003Ch3>1. Component Naming Conventions\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* ✅ Good - Meaningful names *\u002F\n.btn-primary { }\n.card-product { }\n.form-input-error { }\n.navbar-mobile { }\n\n\u002F* ❌ Bad - Vague names *\u002F\n.blue-button { }\n.box1 { }\n.input2 { }\n.nav { }\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>2. Organizing Structure\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* Organized by importance *\u002F\n\n\u002F* 1. Base Components *\u002F\n.btn { }\n.card { }\n.form-input { }\n\n\u002F* 2. Component Variants *\u002F\n.btn-primary { }\n.btn-secondary { }\n.card-hover { }\n.card-bordered { }\n\n\u002F* 3. Component Modifiers *\u002F\n.btn-sm { }\n.btn-lg { }\n\n\u002F* 4. State Classes *\u002F\n.btn:disabled { }\n.form-input.error { }\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>3. Performance Tips\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* ✅ Good - Use @apply only when necessary *\u002F\n.frequently-used-button {\n  @apply px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors;\n}\n\n\u002F* ❌ Bad - Using @apply for everything *\u002F\n.one-time-use {\n  @apply text-red-500 font-bold; \u002F* Should use utility classes directly *\u002F\n}\n\n\u002F* ✅ Good - Combine with utility classes *\u002F\n.special-card {\n  @apply card;\n  \u002F* Add utility classes as needed *\u002F\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Common Pitfalls and Solutions\u003C\u002Fh2>\u003Ch3>1. Using @apply with Pseudo-classes Incorrectly\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* ❌ Doesn't work *\u002F\n.btn {\n  @apply px-4 py-2 bg-blue-500:hover;\n}\n\n\u002F* ✅ Correct *\u002F\n.btn {\n  @apply px-4 py-2 bg-blue-500 hover:bg-blue-600;\n}\n\n\u002F* ✅ Or separate them *\u002F\n.btn {\n  @apply px-4 py-2 bg-blue-500;\n}\n\n.btn:hover {\n  @apply bg-blue-600;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>2. Misusing !important\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* ❌ Bad *\u002F\n.btn {\n  @apply px-4 py-2 !bg-blue-500;\n}\n\n\u002F* ✅ Good - Use specificity *\u002F\n.btn.btn-important {\n  @apply bg-blue-500;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>3. Bundle Size Considerations\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* ⚠️ Warning - May increase bundle size *\u002F\n.every-single-element {\n  @apply p-4 m-2 bg-white rounded shadow;\n}\n\n\u002F* ✅ Good - Use only when necessary *\u002F\n.common-card {\n  @apply p-4 m-2 bg-white rounded shadow;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Working with JavaScript Frameworks\u003C\u002Fh2>\u003Ch3>React Integration\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-jsx\">\u002F\u002F components\u002FButton.jsx\nimport clsx from 'clsx';\n\nconst Button = ({ \n  variant = 'primary',\n  size = 'md', \n  children, \n  className,\n  ...props \n}) => {\n  return (\n    <button \n      className={clsx(\n        'btn',\n        `btn-${variant}`,\n        `btn-${size}`,\n        className\n      )}\n      {...props}\n    >\n      {children}\n    <\u002Fbutton>\n  );\n};\n\n\u002F\u002F Usage\n<Button variant=\"primary\" size=\"lg\" className=\"shadow-lg\">\n  Click Here\n<\u002FButton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Vue.js Integration\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-vue\"><!-- components\u002FCard.vue -->\n<template>\n  <div :class=\"cardClasses\">\n    <img v-if=\"image\" class=\"card-image\" :src=\"image\" :alt=\"title\" loading=\"lazy\">\n    <div class=\"card-body\">\n      <h3 v-if=\"title\" class=\"card-title\">{{ title }}<\u002Fh3>\n      <p v-if=\"description\" class=\"card-text\">{{ description }}<\u002Fp>\n      <slot><\u002Fslot>\n    <\u002Fdiv>\n  <\u002Fdiv>\n<\u002Ftemplate>\n\n<script>\nexport default {\n  props: {\n    variant: {\n      type: String,\n      default: 'default'\n    },\n    hover: {\n      type: Boolean,\n      default: false\n    },\n    image: String,\n    title: String,\n    description: String\n  },\n  computed: {\n    cardClasses() {\n      return [\n        'card',\n        this.hover && 'card-hover',\n        `card-${this.variant}`\n      ].filter(Boolean);\n    }\n  }\n}\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Configuration and Development Workflow\u003C\u002Fh2>\u003Ch3>Tailwind Config for Component System\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js\nmodule.exports = {\n  content: [\n    '.\u002Fsrc\u002F**\u002F*.{html,js,jsx,ts,tsx,vue}',\n    '.\u002Fcomponents\u002F**\u002F*.{html,js,jsx,ts,tsx,vue}'\n  ],\n  theme: {\n    extend: {\n      colors: {\n        primary: {\n          50: '#eff6ff',\n          500: '#3b82f6',\n          600: '#2563eb',\n          700: '#1d4ed8',\n        }\n      },\n      spacing: {\n        '18': '4.5rem',\n      }\n    }\n  },\n  plugins: [\n    require('@tailwindcss\u002Fforms'),\n  ]\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Build Script Setup\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-json\">{\n  \"scripts\": {\n    \"dev\": \"tailwindcss -i .\u002Fsrc\u002Finput.css -o .\u002Fdist\u002Foutput.css --watch\",\n    \"build\": \"tailwindcss -i .\u002Fsrc\u002Finput.css -o .\u002Fdist\u002Foutput.css --minify\"\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Documenting Components\u003C\u002Fh2>\u003Cpre>\u003Ccode class=\"language-css\">\u002F**\n * Button Component\n * \n * Usage:\n * <button class=\"btn btn-primary btn-lg\">Click me<\u002Fbutton>\n * \n * Variants: primary, secondary, green\n * Sizes: sm, md, lg\n * States: disabled\n *\u002F\n.btn {\n  @apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-lg;\n  @apply transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;\n  @apply disabled:opacity-50 disabled:cursor-not-allowed;\n}\n\n\u002F**\n * Card Component\n * \n * Usage:\n * <div class=\"card card-hover\">\n *   <div class=\"card-body\">\n *     <h3 class=\"card-title\">Title<\u002Fh3>\n *     <p class=\"card-text\">Content<\u002Fp>\n *   <\u002Fdiv>\n * <\u002Fdiv>\n * \n * Modifiers: hover, bordered\n *\u002F\n.card {\n  @apply bg-white rounded-lg shadow-md overflow-hidden;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Chr>\u003Ch3>Summary\u003C\u002Fh3>\u003Cp>Creating a Component System with \u003Ccode>@apply\u003C\u002Fcode> and Custom CSS in Tailwind CSS is a powerful technique that allows us to:\u003C\u002Fp>\u003Ch4>Key Benefits:\u003C\u002Fh4>\u003Cul>\u003Cli>\u003Cstrong>Code Faster:\u003C\u002Fstrong> Use ready-to-use components\u003C\u002Fli>\u003Cli>\u003Cstrong>Cleaner HTML:\u003C\u002Fstrong> Reduce class attribute length\u003C\u002Fli>\u003Cli>\u003Cstrong>Easy Maintenance:\u003C\u002Fstrong> Edit once, apply everywhere\u003C\u002Fli>\u003Cli>\u003Cstrong>Build Design Systems:\u003C\u002Fstrong> Clear standards and consistency\u003C\u002Fli>\u003Cli>\u003Cstrong>Maintain Flexibility:\u003C\u002Fstrong> Still able to add utility classes\u003C\u002Fli>\u003C\u002Ful>\u003Ch4>Important Principles:\u003C\u002Fh4>\u003Cul>\u003Cli>Use \u003Ccode>@apply\u003C\u002Fcode> only for frequently used patterns\u003C\u002Fli>\u003Cli>Name components meaningfully\u003C\u002Fli>\u003Cli>Organize with correct \u003Ccode>@layer\u003C\u002Fcode> usage\u003C\u002Fli>\u003Cli>Consider Performance and Bundle Size\u003C\u002Fli>\u003Cli>Document components thoroughly\u003C\u002Fli>\u003C\u002Ful>\u003Ch4>Things to Watch Out For:\u003C\u002Fh4>\u003Cul>\u003Cli>Don't use \u003Ccode>@apply\u003C\u002Fcode> for everything\u003C\u002Fli>\u003Cli>Be mindful of Bundle Size when creating too many components\u003C\u002Fli>\u003Cli>Test Browser Compatibility for new CSS properties\u003C\u002Fli>\u003Cli>Maintain correct CSS import order\u003C\u002Fli>\u003C\u002Ful>\u003Ch4>When to Use Component System:\u003C\u002Fh4>\u003Cul>\u003Cli>\u003Cstrong>Large Projects:\u003C\u002Fstrong> When you have many repeated patterns\u003C\u002Fli>\u003Cli>\u003Cstrong>Team Development:\u003C\u002Fstrong> When multiple developers need consistency\u003C\u002Fli>\u003Cli>\u003Cstrong>Design Systems:\u003C\u002Fstrong> When building a comprehensive UI library\u003C\u002Fli>\u003Cli>\u003Cstrong>Maintenance:\u003C\u002Fstrong> When you need to update styles across many elements\u003C\u002Fli>\u003C\u002Ful>\u003Cp>In the next episode (EP 8), we'll learn about advanced Customization, how to customize Tailwind to make it your own, create Custom Themes, and use various Plugins that will make your Tailwind CSS special and perfectly suited to your projects!\u003C\u002Fp>\u003Cp>Ready to stop writing repetitive code? Follow Superdev School to learn professional web development techniques and don't forget to try creating your own Component System!\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>","14_11zon_al1iizfqqz.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Ffo2xjdfykq88p46\u002F14_11zon_al1iizfqqz.webp","2026-03-04 08:26:44.696Z","",{"keywords":15,"locale":38,"school_blog":48},[16,23,28,33],{"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:42.252Z","ujbbp4zfs5h7m0a","tailwind css components","2026-04-10 16:07:33.360Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:26:43.420Z","n8b5mlzs5myjtxf","component system development","2026-04-10 16:07:33.657Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:26:35.002Z","eq1u1plwlvvr2rh","Tailwind CSS","2026-04-10 16:07:31.210Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:26:44.152Z","eq08j40z29v20nv","tailwind css @apply directive","2026-04-10 16:07:33.974Z",{"code":39,"collectionId":40,"collectionName":41,"created":42,"flag":43,"id":44,"is_default":45,"label":46,"updated":47},"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":49,"collectionId":50,"collectionName":51,"created":13,"expand":52,"id":65,"slug":66,"updated":13,"views":67},"i22e96fj41lsws7","pbc_2105096300","school_blogs",{"category":53},{"blogIds":54,"collectionId":55,"collectionName":56,"created":57,"created_by":13,"id":49,"image":58,"image_alt":13,"image_path":59,"label":60,"name":31,"priority":61,"publish_at":62,"scheduled_at":13,"status":63,"updated":64,"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":31,"th":31},10,"2025-07-25 05:27:14.926Z","published","2026-04-25 02:32:14.403Z","tt7uw2utkkgax7m","tailwind-css-component-system-apply-directive-tutorial-ep7",206,"fo2xjdfykq88p46",[20,25,30,35],"2025-07-22 10:18:53.612Z","Learn how to build professional Component Systems using @apply directive in Tailwind CSS. Reduce lengthy HTML classes, create maintainable Design Systems, and master Best Practices with practical examples for React\u002FVue.js integration.","2026-05-12 01:14:29.149Z",1,{"th":66,"en":66}]