Software Development
Styling
Tailwind CSS

Most Used Tailwind CSS Concept or Snippets

Useful Tailwind Bookmarks

Site NameDescription
Tailwind CSS Official Docs (opens in a new tab)Official docs of Tailwind CSS
Headless UI (opens in a new tab)Some Unstlyed UI Components and customizeable with Tailwind CSS
Tailwind color generator (opens in a new tab)Easily generate color shades for your Tailwind CSS config file.
Awesome Tailwind CSS (opens in a new tab)List of useful notes, tools, or cheatsheet about Tailwind CSS
Tailwind Kit (opens in a new tab)Tail-kit is a free and open source components and templates kit fully coded with Tailwind CSS 2.0
Tailwind Forms (opens in a new tab)Official Tailwind plugin for forms element
Tailwind Play (opens in a new tab)Official playground for Tailwind CSS
Tailwind Merge (opens in a new tab)Utility function to efficiently merge Tailwind CSS classes in JS without style conflicts.
Tailwind CSS Pallete Generator (opens in a new tab)10-color pallete generator and API for Tailwind CSS
Hypecolor (opens in a new tab)A curated collection of beautiful premade gradients using default colors from Tailwind pallete as well as a selection of custom color gradients

Most Used Global Styling for React + Tailwind Projects

Taken from yehezgun-v3 base styling (opens in a new tab)

Reference: Theodorus Clarence's Blog about Tailwind CSS best practice (opens in a new tab)

@tailwind base;
@tailwind components;
@tailwind utilities;
/* https://play.tailwindcss.com/NVUHzqMBl5?file=css */
:root {
  /* #region  /**=========== Primary Color =========== */
  /* !STARTERCONF Customize these variable, copy and paste from /styles/colors.css for list of colors */
  --tw-color-primary-50: 249 250 251;
  --tw-color-primary-100: 243 244 246;
  --tw-color-primary-200: 229 231 235;
  --tw-color-primary-300: 209 213 219;
  --tw-color-primary-400: 156 163 175;
  --tw-color-primary-500: 107 114 128;
  --tw-color-primary-600: 75 85 99;
  --tw-color-primary-700: 55 65 81;
  --tw-color-primary-800: 31 41 55;
  --tw-color-primary-900: 17 24 39;
  --color-primary-50: rgb(var(--tw-color-primary-50)); /* #f9fafb */
  --color-primary-100: rgb(var(--tw-color-primary-100)); /* #f3f4f6 */
  --color-primary-200: rgb(var(--tw-color-primary-200)); /* #e5e7eb */
  --color-primary-300: rgb(var(--tw-color-primary-300)); /* #d1d5db */
  --color-primary-400: rgb(var(--tw-color-primary-400)); /* #9ca3af */
  --color-primary-500: rgb(var(--tw-color-primary-500)); /* #6b7280 */
  --color-primary-600: rgb(var(--tw-color-primary-600)); /* #4b5563 */
  --color-primary-700: rgb(var(--tw-color-primary-700)); /* #374151 */
  --color-primary-800: rgb(var(--tw-color-primary-800)); /* #1f2937 */
  --color-primary-900: rgb(var(--tw-color-primary-900)); /* #111827 */
  /* #endregion  /**======== Primary Color =========== */
}
 
@layer base {
  .cursor-newtab {
    cursor: url('/newtab-cursor.png') 10 10, pointer;
  }
 
  /* #region  /**=========== Typography =========== */
  h1 {
    @apply font-primary text-2xl font-bold md:text-4xl;
  }
 
  h2 {
    @apply font-primary text-xl font-bold md:text-3xl;
  }
 
  h3 {
    @apply font-primary text-lg font-bold md:text-2xl;
  }
 
  h4 {
    @apply font-primary text-base font-bold md:text-lg;
  }
 
  body {
    @apply font-secondary text-sm md:text-base;
  }
 
  .layout-container {
    @apply mx-auto max-w-4xl px-4 pt-20 pb-8 md:px-2;
  }
 
  .link-underline {
    background-image: linear-gradient(transparent, transparent), linear-gradient(to
          right, var(--color-primary-200), var(--color-primary-500));
    background-size: 0 3px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out;
  }
 
  .link-underline:hover {
    background-size: 100% 3px;
    background-position: 0 100%;
  }
}
 
@layer utilities {
  .scrollbar::-webkit-scrollbar {
    @apply h-4 w-4;
  }
 
  .scrollbar::-webkit-scrollbar-track {
    border-radius: 100vh;
    @apply bg-primary-200 dark:bg-primary-500;
  }
 
  .scrollbar::-webkit-scrollbar-thumb {
    border-radius: 100vh;
    @apply border border-zinc-200 bg-zinc-400 dark:bg-zinc-600;
    @apply hover:bg-slate-400;
  }
}

Basic Layout Component that I usually use in Next.JS

Taken from yehezgun-v3 Layout Component (opens in a new tab)

<>
  <HeaderComponent />
  <PreloadProvider>
    <div className="layout-container">{children}</div>
  </PreloadProvider>
  <FooterComponent />
</>

Basic Page Structure that I usually use in Next.JS

export default function PageName() {
  return (
    <>
      <main>
        <section>{contents}</section>
      </main>
    </>
  )
}
Chakra UIStandard Version