Most Used Tailwind CSS Concept or Snippets
Useful Tailwind Bookmarks
Site Name | Description |
---|---|
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>
</>
)
}