Tailwind CSS

Tailwind CSS logo since v1


Tailwind CSS is an open source CSS library, and their main feature is utility CSS classes that can be mixed and matched. Unlike most other CSS libraries such as Bootstrap, because there are no predefined classes.[1][2]

Tailwind CSS examples

Button

To make a button in Tailwind CSS you would use this HTML code:

<!--The style and script tags at the top are for offline mode users-->
<style>
    /* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */*,
::after,
::before {
 box-sizing:border-box;
 border-width:0;
 border-style:solid;
 border-color:#e5e7eb
}
::after,
::before {
 --tw-content:''
}
:host,
html {
 line-height:1.5;
 -webkit-text-size-adjust:100%;
 -moz-tab-size:4;
 tab-size:4;
 font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 font-feature-settings:normal;
 font-variation-settings:normal;
 -webkit-tap-highlight-color:transparent
}
body {
 margin:0;
 line-height:inherit
}
hr {
 height:0;
 color:inherit;
 border-top-width:1px
}
abbr:where([title]) {
 -webkit-text-decoration:underline dotted;
 text-decoration:underline dotted
}
h1,
h2,
h3,
h4,
h5,
h6 {
 font-size:inherit;
 font-weight:inherit
}
a {
 color:inherit;
 text-decoration:inherit
}
b,
strong {
 font-weight:bolder
}
code,
kbd,
pre,
samp {
 font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 font-feature-settings:normal;
 font-variation-settings:normal;
 font-size:1em
}
small {
 font-size:80%
}
sub,
sup {
 font-size:75%;
 line-height:0;
 position:relative;
 vertical-align:baseline
}
sub {
 bottom:-.25em
}
sup {
 top:-.5em
}
table {
 text-indent:0;
 border-color:inherit;
 border-collapse:collapse
}
button,
input,
optgroup,
select,
textarea {
 font-family:inherit;
 font-feature-settings:inherit;
 font-variation-settings:inherit;
 font-size:100%;
 font-weight:inherit;
 line-height:inherit;
 color:inherit;
 margin:0;
 padding:0
}
button,
select {
 text-transform:none
}
[type=button],
[type=reset],
[type=submit],
button {
 -webkit-appearance:button;
 background-color:transparent;
 background-image:none
}
:-moz-focusring {
 outline:auto
}
:-moz-ui-invalid {
 box-shadow:none
}
progress {
 vertical-align:baseline
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
 height:auto
}
[type=search] {
 -webkit-appearance:textfield;
 outline-offset:-2px
}
::-webkit-search-decoration {
 -webkit-appearance:none
}
::-webkit-file-upload-button {
 -webkit-appearance:button;
 font:inherit
}
summary {
 display:list-item
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
 margin:0
}
fieldset {
 margin:0;
 padding:0
}
legend {
 padding:0
}
menu,
ol,
ul {
 list-style:none;
 margin:0;
 padding:0
}
dialog {
 padding:0
}
textarea {
 resize:vertical
}
input::placeholder,
textarea::placeholder {
 opacity:1;
 color:#9ca3af
}
[role=button],
button {
 cursor:pointer
}
:disabled {
 cursor:default
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
 display:block;
 vertical-align:middle
}
img,
video {
 max-width:100%;
 height:auto
}
[hidden] {
 display:none
}
*,
::before,
::after {
 --tw-border-spacing-x:0;
 --tw-border-spacing-y:0;
 --tw-translate-x:0;
 --tw-translate-y:0;
 --tw-rotate:0;
 --tw-skew-x:0;
 --tw-skew-y:0;
 --tw-scale-x:1;
 --tw-scale-y:1;
 --tw-pan-x: ;
 --tw-pan-y: ;
 --tw-pinch-zoom: ;
 --tw-scroll-snap-strictness:proximity;
 --tw-gradient-from-position: ;
 --tw-gradient-via-position: ;
 --tw-gradient-to-position: ;
 --tw-ordinal: ;
 --tw-slashed-zero: ;
 --tw-numeric-figure: ;
 --tw-numeric-spacing: ;
 --tw-numeric-fraction: ;
 --tw-ring-inset: ;
 --tw-ring-offset-width:0px;
 --tw-ring-offset-color:#fff;
 --tw-ring-color:rgb(59 130 246 / 0.5);
 --tw-ring-offset-shadow:0 0 #0000;
 --tw-ring-shadow:0 0 #0000;
 --tw-shadow:0 0 #0000;
 --tw-shadow-colored:0 0 #0000;
 --tw-blur: ;
 --tw-brightness: ;
 --tw-contrast: ;
 --tw-grayscale: ;
 --tw-hue-rotate: ;
 --tw-invert: ;
 --tw-saturate: ;
 --tw-sepia: ;
 --tw-drop-shadow: ;
 --tw-backdrop-blur: ;
 --tw-backdrop-brightness: ;
 --tw-backdrop-contrast: ;
 --tw-backdrop-grayscale: ;
 --tw-backdrop-hue-rotate: ;
 --tw-backdrop-invert: ;
 --tw-backdrop-opacity: ;
 --tw-backdrop-saturate: ;
 --tw-backdrop-sepia: 
}
::backdrop {
 --tw-border-spacing-x:0;
 --tw-border-spacing-y:0;
 --tw-translate-x:0;
 --tw-translate-y:0;
 --tw-rotate:0;
 --tw-skew-x:0;
 --tw-skew-y:0;
 --tw-scale-x:1;
 --tw-scale-y:1;
 --tw-pan-x: ;
 --tw-pan-y: ;
 --tw-pinch-zoom: ;
 --tw-scroll-snap-strictness:proximity;
 --tw-gradient-from-position: ;
 --tw-gradient-via-position: ;
 --tw-gradient-to-position: ;
 --tw-ordinal: ;
 --tw-slashed-zero: ;
 --tw-numeric-figure: ;
 --tw-numeric-spacing: ;
 --tw-numeric-fraction: ;
 --tw-ring-inset: ;
 --tw-ring-offset-width:0px;
 --tw-ring-offset-color:#fff;
 --tw-ring-color:rgb(59 130 246 / 0.5);
 --tw-ring-offset-shadow:0 0 #0000;
 --tw-ring-shadow:0 0 #0000;
 --tw-shadow:0 0 #0000;
 --tw-shadow-colored:0 0 #0000;
 --tw-blur: ;
 --tw-brightness: ;
 --tw-contrast: ;
 --tw-grayscale: ;
 --tw-hue-rotate: ;
 --tw-invert: ;
 --tw-saturate: ;
 --tw-sepia: ;
 --tw-drop-shadow: ;
 --tw-backdrop-blur: ;
 --tw-backdrop-brightness: ;
 --tw-backdrop-contrast: ;
 --tw-backdrop-grayscale: ;
 --tw-backdrop-hue-rotate: ;
 --tw-backdrop-invert: ;
 --tw-backdrop-opacity: ;
 --tw-backdrop-saturate: ;
 --tw-backdrop-sepia: 
}
.sr-only {
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0, 0, 0, 0);
 white-space:nowrap;
 border-width:0
}
.mx-auto {
 margin-left:auto;
 margin-right:auto
}
.mt-4 {
 margin-top:1rem
}
.block {
 display:block
}
.flex {
 display:flex
}
.inline-flex {
 display:inline-flex
}
.hidden {
 display:none
}
.h-10 {
 height:2.5rem
}
.h-5 {
 height:1.25rem
}
.h-8 {
 height:2rem
}
.w-10 {
 width:2.5rem
}
.w-5 {
 width:1.25rem
}
.w-full {
 width:100%
}
.max-w-screen-xl {
 max-width:1280px
}
.flex-col {
 flex-direction:column
}
.flex-wrap {
 flex-wrap:wrap
}
.items-center {
 align-items:center
}
.justify-center {
 justify-content:center
}
.justify-between {
 justify-content:space-between
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
 --tw-space-x-reverse:0;
 margin-right:calc(0.75rem * var(--tw-space-x-reverse));
 margin-left:calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))
}
.rounded {
 border-radius:0.25rem
}
.rounded-lg {
 border-radius:0.5rem
}
.border {
 border-width:1px
}
.border-gray-100 {
 --tw-border-opacity:1;
 border-color:rgb(243 244 246 / var(--tw-border-opacity))
}
.border-gray-200 {
 --tw-border-opacity:1;
 border-color:rgb(229 231 235 / var(--tw-border-opacity))
}
.bg-blue-700 {
 --tw-bg-opacity:1;
 background-color:rgb(29 78 216 / var(--tw-bg-opacity))
}
.bg-gray-50 {
 --tw-bg-opacity:1;
 background-color:rgb(249 250 251 / var(--tw-bg-opacity))
}
.bg-white {
 --tw-bg-opacity:1;
 background-color:rgb(255 255 255 / var(--tw-bg-opacity))
}
.p-2 {
 padding:0.5rem
}
.p-4 {
 padding:1rem
}
.px-3 {
 padding-left:0.75rem;
 padding-right:0.75rem
}
.py-2 {
 padding-top:0.5rem;
 padding-bottom:0.5rem
}
.text-sm {
 font-size:0.875rem;
 line-height:1.25rem
}
.font-medium {
 font-weight:500
}
.text-gray-500 {
 --tw-text-opacity:1;
 color:rgb(107 114 128 / var(--tw-text-opacity))
}
.text-gray-900 {
 --tw-text-opacity:1;
 color:rgb(17 24 39 / var(--tw-text-opacity))
}
.text-white {
 --tw-text-opacity:1;
 color:rgb(255 255 255 / var(--tw-text-opacity))
}
.hover\:bg-gray-100:hover {
 --tw-bg-opacity:1;
 background-color:rgb(243 244 246 / var(--tw-bg-opacity))
}
.focus\:outline-none:focus {
 outline:2px solid transparent;
 outline-offset:2px
}
.focus\:ring-2:focus {
 --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
 --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
 box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.focus\:ring-gray-200:focus {
 --tw-ring-opacity:1;
 --tw-ring-color:rgb(229 231 235 / var(--tw-ring-opacity))
}
@media (min-width: 768px) {
 .md\:mt-0 {
  margin-top:0px
 }
 .md\:block {
  display:block
 }
 .md\:hidden {
  display:none
 }
 .md\:w-auto {
  width:auto
 }
 .md\:flex-row {
  flex-direction:row
 }
 .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse:0;
  margin-right:calc(2rem * var(--tw-space-x-reverse));
  margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))
 }
 .md\:border-0 {
  border-width:0px
 }
 .md\:bg-transparent {
  background-color:transparent
 }
 .md\:bg-white {
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity))
 }
 .md\:p-0 {
  padding:0px
 }
 .md\:text-blue-700 {
  --tw-text-opacity:1;
  color:rgb(29 78 216 / var(--tw-text-opacity))
 }
 .md\:hover\:bg-transparent:hover {
  background-color:transparent
 }
 .md\:hover\:text-blue-700:hover {
  --tw-text-opacity:1;
  color:rgb(29 78 216 / var(--tw-text-opacity))
 }
}
.rtl\:space-x-reverse:where([dir="rtl"],
[dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) {
 --tw-space-x-reverse:1
}
@media (prefers-color-scheme: dark) {
 .dark\:border-gray-700 {
  --tw-border-opacity:1;
  border-color:rgb(55 65 81 / var(--tw-border-opacity))
 }
 .dark\:bg-gray-800 {
  --tw-bg-opacity:1;
  background-color:rgb(31 41 55 / var(--tw-bg-opacity))
 }
 .dark\:bg-gray-900 {
  --tw-bg-opacity:1;
  background-color:rgb(17 24 39 / var(--tw-bg-opacity))
 }
 .dark\:text-gray-400 {
  --tw-text-opacity:1;
  color:rgb(156 163 175 / var(--tw-text-opacity))
 }
 .dark\:text-white {
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity))
 }
 .dark\:hover\:bg-gray-700:hover {
  --tw-bg-opacity:1;
  background-color:rgb(55 65 81 / var(--tw-bg-opacity))
 }
 .dark\:hover\:text-white:hover {
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity))
 }
 .dark\:focus\:ring-gray-600:focus {
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(75 85 99 / var(--tw-ring-opacity))
 }
}
@media (min-width: 768px) {
 @media (prefers-color-scheme: dark) {
  .md\:dark\:bg-gray-900 {
   --tw-bg-opacity:1;
   background-color:rgb(17 24 39 / var(--tw-bg-opacity))
  }
  .md\:dark\:text-blue-500 {
   --tw-text-opacity:1;
   color:rgb(59 130 246 / var(--tw-text-opacity))
  }
  .md\:dark\:hover\:bg-transparent:hover {
   background-color:transparent
  }
  .md\:dark\:hover\:text-blue-500:hover {
   --tw-text-opacity:1;
   color:rgb(59 130 246 / var(--tw-text-opacity))
  }
 }
}

</style>
<script src="https://cdn.tailwindcss.com"></script>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

This will create a slightly rounded button that is filled in blue with the text "Button" inside it.

Result:

Tailwindbutton

To make a navbar in Tailwind CSS you would use this HTML code:

<!--The style and script tags at the top are for offline mode users-->
<style>
    /* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */*,
::after,
::before {
 box-sizing:border-box;
 border-width:0;
 border-style:solid;
 border-color:#e5e7eb
}
::after,
::before {
 --tw-content:''
}
:host,
html {
 line-height:1.5;
 -webkit-text-size-adjust:100%;
 -moz-tab-size:4;
 tab-size:4;
 font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 font-feature-settings:normal;
 font-variation-settings:normal;
 -webkit-tap-highlight-color:transparent
}
body {
 margin:0;
 line-height:inherit
}
hr {
 height:0;
 color:inherit;
 border-top-width:1px
}
abbr:where([title]) {
 -webkit-text-decoration:underline dotted;
 text-decoration:underline dotted
}
h1,
h2,
h3,
h4,
h5,
h6 {
 font-size:inherit;
 font-weight:inherit
}
a {
 color:inherit;
 text-decoration:inherit
}
b,
strong {
 font-weight:bolder
}
code,
kbd,
pre,
samp {
 font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 font-feature-settings:normal;
 font-variation-settings:normal;
 font-size:1em
}
small {
 font-size:80%
}
sub,
sup {
 font-size:75%;
 line-height:0;
 position:relative;
 vertical-align:baseline
}
sub {
 bottom:-.25em
}
sup {
 top:-.5em
}
table {
 text-indent:0;
 border-color:inherit;
 border-collapse:collapse
}
button,
input,
optgroup,
select,
textarea {
 font-family:inherit;
 font-feature-settings:inherit;
 font-variation-settings:inherit;
 font-size:100%;
 font-weight:inherit;
 line-height:inherit;
 color:inherit;
 margin:0;
 padding:0
}
button,
select {
 text-transform:none
}
[type=button],
[type=reset],
[type=submit],
button {
 -webkit-appearance:button;
 background-color:transparent;
 background-image:none
}
:-moz-focusring {
 outline:auto
}
:-moz-ui-invalid {
 box-shadow:none
}
progress {
 vertical-align:baseline
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
 height:auto
}
[type=search] {
 -webkit-appearance:textfield;
 outline-offset:-2px
}
::-webkit-search-decoration {
 -webkit-appearance:none
}
::-webkit-file-upload-button {
 -webkit-appearance:button;
 font:inherit
}
summary {
 display:list-item
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
 margin:0
}
fieldset {
 margin:0;
 padding:0
}
legend {
 padding:0
}
menu,
ol,
ul {
 list-style:none;
 margin:0;
 padding:0
}
dialog {
 padding:0
}
textarea {
 resize:vertical
}
input::placeholder,
textarea::placeholder {
 opacity:1;
 color:#9ca3af
}
[role=button],
button {
 cursor:pointer
}
:disabled {
 cursor:default
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
 display:block;
 vertical-align:middle
}
img,
video {
 max-width:100%;
 height:auto
}
[hidden] {
 display:none
}
*,
::before,
::after {
 --tw-border-spacing-x:0;
 --tw-border-spacing-y:0;
 --tw-translate-x:0;
 --tw-translate-y:0;
 --tw-rotate:0;
 --tw-skew-x:0;
 --tw-skew-y:0;
 --tw-scale-x:1;
 --tw-scale-y:1;
 --tw-pan-x: ;
 --tw-pan-y: ;
 --tw-pinch-zoom: ;
 --tw-scroll-snap-strictness:proximity;
 --tw-gradient-from-position: ;
 --tw-gradient-via-position: ;
 --tw-gradient-to-position: ;
 --tw-ordinal: ;
 --tw-slashed-zero: ;
 --tw-numeric-figure: ;
 --tw-numeric-spacing: ;
 --tw-numeric-fraction: ;
 --tw-ring-inset: ;
 --tw-ring-offset-width:0px;
 --tw-ring-offset-color:#fff;
 --tw-ring-color:rgb(59 130 246 / 0.5);
 --tw-ring-offset-shadow:0 0 #0000;
 --tw-ring-shadow:0 0 #0000;
 --tw-shadow:0 0 #0000;
 --tw-shadow-colored:0 0 #0000;
 --tw-blur: ;
 --tw-brightness: ;
 --tw-contrast: ;
 --tw-grayscale: ;
 --tw-hue-rotate: ;
 --tw-invert: ;
 --tw-saturate: ;
 --tw-sepia: ;
 --tw-drop-shadow: ;
 --tw-backdrop-blur: ;
 --tw-backdrop-brightness: ;
 --tw-backdrop-contrast: ;
 --tw-backdrop-grayscale: ;
 --tw-backdrop-hue-rotate: ;
 --tw-backdrop-invert: ;
 --tw-backdrop-opacity: ;
 --tw-backdrop-saturate: ;
 --tw-backdrop-sepia: 
}
::backdrop {
 --tw-border-spacing-x:0;
 --tw-border-spacing-y:0;
 --tw-translate-x:0;
 --tw-translate-y:0;
 --tw-rotate:0;
 --tw-skew-x:0;
 --tw-skew-y:0;
 --tw-scale-x:1;
 --tw-scale-y:1;
 --tw-pan-x: ;
 --tw-pan-y: ;
 --tw-pinch-zoom: ;
 --tw-scroll-snap-strictness:proximity;
 --tw-gradient-from-position: ;
 --tw-gradient-via-position: ;
 --tw-gradient-to-position: ;
 --tw-ordinal: ;
 --tw-slashed-zero: ;
 --tw-numeric-figure: ;
 --tw-numeric-spacing: ;
 --tw-numeric-fraction: ;
 --tw-ring-inset: ;
 --tw-ring-offset-width:0px;
 --tw-ring-offset-color:#fff;
 --tw-ring-color:rgb(59 130 246 / 0.5);
 --tw-ring-offset-shadow:0 0 #0000;
 --tw-ring-shadow:0 0 #0000;
 --tw-shadow:0 0 #0000;
 --tw-shadow-colored:0 0 #0000;
 --tw-blur: ;
 --tw-brightness: ;
 --tw-contrast: ;
 --tw-grayscale: ;
 --tw-hue-rotate: ;
 --tw-invert: ;
 --tw-saturate: ;
 --tw-sepia: ;
 --tw-drop-shadow: ;
 --tw-backdrop-blur: ;
 --tw-backdrop-brightness: ;
 --tw-backdrop-contrast: ;
 --tw-backdrop-grayscale: ;
 --tw-backdrop-hue-rotate: ;
 --tw-backdrop-invert: ;
 --tw-backdrop-opacity: ;
 --tw-backdrop-saturate: ;
 --tw-backdrop-sepia: 
}
.sr-only {
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0, 0, 0, 0);
 white-space:nowrap;
 border-width:0
}
.mx-auto {
 margin-left:auto;
 margin-right:auto
}
.mt-4 {
 margin-top:1rem
}
.block {
 display:block
}
.flex {
 display:flex
}
.inline-flex {
 display:inline-flex
}
.hidden {
 display:none
}
.h-10 {
 height:2.5rem
}
.h-5 {
 height:1.25rem
}
.h-8 {
 height:2rem
}
.w-10 {
 width:2.5rem
}
.w-5 {
 width:1.25rem
}
.w-full {
 width:100%
}
.max-w-screen-xl {
 max-width:1280px
}
.flex-col {
 flex-direction:column
}
.flex-wrap {
 flex-wrap:wrap
}
.items-center {
 align-items:center
}
.justify-center {
 justify-content:center
}
.justify-between {
 justify-content:space-between
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
 --tw-space-x-reverse:0;
 margin-right:calc(0.75rem * var(--tw-space-x-reverse));
 margin-left:calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))
}
.rounded {
 border-radius:0.25rem
}
.rounded-lg {
 border-radius:0.5rem
}
.border {
 border-width:1px
}
.border-gray-100 {
 --tw-border-opacity:1;
 border-color:rgb(243 244 246 / var(--tw-border-opacity))
}
.border-gray-200 {
 --tw-border-opacity:1;
 border-color:rgb(229 231 235 / var(--tw-border-opacity))
}
.bg-blue-700 {
 --tw-bg-opacity:1;
 background-color:rgb(29 78 216 / var(--tw-bg-opacity))
}
.bg-gray-50 {
 --tw-bg-opacity:1;
 background-color:rgb(249 250 251 / var(--tw-bg-opacity))
}
.bg-white {
 --tw-bg-opacity:1;
 background-color:rgb(255 255 255 / var(--tw-bg-opacity))
}
.p-2 {
 padding:0.5rem
}
.p-4 {
 padding:1rem
}
.px-3 {
 padding-left:0.75rem;
 padding-right:0.75rem
}
.py-2 {
 padding-top:0.5rem;
 padding-bottom:0.5rem
}
.text-sm {
 font-size:0.875rem;
 line-height:1.25rem
}
.font-medium {
 font-weight:500
}
.text-gray-500 {
 --tw-text-opacity:1;
 color:rgb(107 114 128 / var(--tw-text-opacity))
}
.text-gray-900 {
 --tw-text-opacity:1;
 color:rgb(17 24 39 / var(--tw-text-opacity))
}
.text-white {
 --tw-text-opacity:1;
 color:rgb(255 255 255 / var(--tw-text-opacity))
}
.hover\:bg-gray-100:hover {
 --tw-bg-opacity:1;
 background-color:rgb(243 244 246 / var(--tw-bg-opacity))
}
.focus\:outline-none:focus {
 outline:2px solid transparent;
 outline-offset:2px
}
.focus\:ring-2:focus {
 --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
 --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
 box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.focus\:ring-gray-200:focus {
 --tw-ring-opacity:1;
 --tw-ring-color:rgb(229 231 235 / var(--tw-ring-opacity))
}
@media (min-width: 768px) {
 .md\:mt-0 {
  margin-top:0px
 }
 .md\:block {
  display:block
 }
 .md\:hidden {
  display:none
 }
 .md\:w-auto {
  width:auto
 }
 .md\:flex-row {
  flex-direction:row
 }
 .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse:0;
  margin-right:calc(2rem * var(--tw-space-x-reverse));
  margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))
 }
 .md\:border-0 {
  border-width:0px
 }
 .md\:bg-transparent {
  background-color:transparent
 }
 .md\:bg-white {
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity))
 }
 .md\:p-0 {
  padding:0px
 }
 .md\:text-blue-700 {
  --tw-text-opacity:1;
  color:rgb(29 78 216 / var(--tw-text-opacity))
 }
 .md\:hover\:bg-transparent:hover {
  background-color:transparent
 }
 .md\:hover\:text-blue-700:hover {
  --tw-text-opacity:1;
  color:rgb(29 78 216 / var(--tw-text-opacity))
 }
}
.rtl\:space-x-reverse:where([dir="rtl"],
[dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) {
 --tw-space-x-reverse:1
}
@media (prefers-color-scheme: dark) {
 .dark\:border-gray-700 {
  --tw-border-opacity:1;
  border-color:rgb(55 65 81 / var(--tw-border-opacity))
 }
 .dark\:bg-gray-800 {
  --tw-bg-opacity:1;
  background-color:rgb(31 41 55 / var(--tw-bg-opacity))
 }
 .dark\:bg-gray-900 {
  --tw-bg-opacity:1;
  background-color:rgb(17 24 39 / var(--tw-bg-opacity))
 }
 .dark\:text-gray-400 {
  --tw-text-opacity:1;
  color:rgb(156 163 175 / var(--tw-text-opacity))
 }
 .dark\:text-white {
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity))
 }
 .dark\:hover\:bg-gray-700:hover {
  --tw-bg-opacity:1;
  background-color:rgb(55 65 81 / var(--tw-bg-opacity))
 }
 .dark\:hover\:text-white:hover {
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity))
 }
 .dark\:focus\:ring-gray-600:focus {
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(75 85 99 / var(--tw-ring-opacity))
 }
}
@media (min-width: 768px) {
 @media (prefers-color-scheme: dark) {
  .md\:dark\:bg-gray-900 {
   --tw-bg-opacity:1;
   background-color:rgb(17 24 39 / var(--tw-bg-opacity))
  }
  .md\:dark\:text-blue-500 {
   --tw-text-opacity:1;
   color:rgb(59 130 246 / var(--tw-text-opacity))
  }
  .md\:dark\:hover\:bg-transparent:hover {
   background-color:transparent
  }
  .md\:dark\:hover\:text-blue-500:hover {
   --tw-text-opacity:1;
   color:rgb(59 130 246 / var(--tw-text-opacity))
  }
 }
}

</style>
<script src="https://cdn.tailwindcss.com"></script>
<nav class="bg-white border-gray-200 dark:bg-gray-900">
  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
    <a href="https://v1.tailwindcss.com" class="flex items-center space-x-3 rtl:space-x-reverse">
        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNjIgMzMiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjcgMEMxOS44IDAgMTUuMyAzLjYgMTMuNSAxMC44QzE2LjIgNy4yIDE5LjM1IDUuODUgMjIuOTUgNi43NUMyNS4wMDQgNy4yNjMgMjYuNDcyIDguNzU0IDI4LjA5NyAxMC40MDNDMzAuNzQ0IDEzLjA5IDMzLjgwOCAxNi4yIDQwLjUgMTYuMkM0Ny43IDE2LjIgNTIuMiAxMi42IDU0IDUuNEM1MS4zIDkgNDguMTUgMTAuMzUgNDQuNTUgOS40NUM0Mi40OTYgOC45MzcgNDEuMDI4IDcuNDQ2IDM5LjQwMyA1Ljc5N0MzNi43NTYgMy4xMSAzMy42OTIgMCAyNyAwWk0xMy41IDE2LjJDNi4zIDE2LjIgMS44IDE5LjggMCAyN0MyLjcgMjMuNCA1Ljg1IDIyLjA1IDkuNDUgMjIuOTVDMTEuNTA0IDIzLjQ2NCAxMi45NzIgMjQuOTU0IDE0LjU5NyAyNi42MDNDMTcuMjQ0IDI5LjI5IDIwLjMwOCAzMi40IDI3IDMyLjRDMzQuMiAzMi40IDM4LjcgMjguOCA0MC41IDIxLjZDMzcuOCAyNS4yIDM0LjY1IDI2LjU1IDMxLjA1IDI1LjY1QzI4Ljk5NiAyNS4xMzcgMjcuNTI4IDIzLjY0NiAyNS45MDMgMjEuOTk3QzIzLjI1NiAxOS4zMSAyMC4xOTIgMTYuMiAxMy41IDE2LjJaIiBmaWxsPSIjMzhCREY4Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04MC45OTYgMTMuNjUySDc2LjI4NFYyMi43NzJDNzYuMjg0IDI1LjIwNCA3Ny44OCAyNS4xNjYgODAuOTk2IDI1LjAxNFYyOC43Qzc0LjY4OCAyOS40NiA3Mi4xOCAyNy43MTIgNzIuMTggMjIuNzcyVjEzLjY1Mkg2OC42ODRWOS42OTk5Nkg3Mi4xOFY0LjU5NTk2TDc2LjI4NCAzLjM3OTk2VjkuNjk5OTZIODAuOTk2VjEzLjY1MlpNOTguOTU4IDkuNjk5OTZIMTAzLjA2MlYyOC43SDk4Ljk1OFYyNS45NjRDOTcuNTE0IDI3Ljk3OCA5NS4yNzIgMjkuMTk0IDkyLjMwOCAyOS4xOTRDODcuMTQgMjkuMTk0IDgyLjg0NiAyNC44MjQgODIuODQ2IDE5LjJDODIuODQ2IDEzLjUzOCA4Ny4xNCA5LjIwNTk2IDkyLjMwOCA5LjIwNTk2Qzk1LjI3MiA5LjIwNTk2IDk3LjUxNCAxMC40MjIgOTguOTU4IDEyLjM5OFY5LjY5OTk2Wk05Mi45NTQgMjUuMjhDOTYuMzc0IDI1LjI4IDk4Ljk1OCAyMi43MzQgOTguOTU4IDE5LjJDOTguOTU4IDE1LjY2NiA5Ni4zNzQgMTMuMTIgOTIuOTU0IDEzLjEyQzg5LjUzNCAxMy4xMiA4Ni45NSAxNS42NjYgODYuOTUgMTkuMkM4Ni45NSAyMi43MzQgODkuNTM0IDI1LjI4IDkyLjk1NCAyNS4yOFpNMTA5LjkwMiA2Ljg0OTk2QzEwOC40NTggNi44NDk5NiAxMDcuMjggNS42MzM5NiAxMDcuMjggNC4yMjc5NkMxMDcuMjgxIDMuNTMyOTcgMTA3LjU1OCAyLjg2NjgyIDEwOC4wNDkgMi4zNzUzOUMxMDguNTQxIDEuODgzOTUgMTA5LjIwNyAxLjYwNzI4IDEwOS45MDIgMS42MDU5NkMxMTAuNTk3IDEuNjA3MjggMTExLjI2MyAxLjg4Mzk1IDExMS43NTUgMi4zNzUzOUMxMTIuMjQ2IDIuODY2ODIgMTEyLjUyMyAzLjUzMjk3IDExMi41MjQgNC4yMjc5NkMxMTIuNTI0IDUuNjMzOTYgMTExLjM0NiA2Ljg0OTk2IDEwOS45MDIgNi44NDk5NlpNMTA3Ljg1IDI4LjdWOS42OTk5NkgxMTEuOTU0VjI4LjdIMTA3Ljg1Wk0xMTYuNzA0IDI4LjdWMC45NTk5NjFIMTIwLjgwOFYyOC43SDExNi43MDRaTTE0Ny40NDYgOS42OTk5NkgxNTEuNzc4TDE0NS44MTIgMjguN0gxNDEuNzg0TDEzNy44MzIgMTUuODk0TDEzMy44NDIgMjguN0gxMjkuODE0TDEyMy44NDggOS42OTk5NkgxMjguMThMMTMxLjg2NiAyMi44MUwxMzUuODU2IDkuNjk5OTZIMTM5Ljc3TDE0My43MjIgMjIuODFMMTQ3LjQ0NiA5LjY5OTk2Wk0xNTYuODcgNi44NDk5NkMxNTUuNDI2IDYuODQ5OTYgMTU0LjI0OCA1LjYzMzk2IDE1NC4yNDggNC4yMjc5NkMxNTQuMjQ5IDMuNTMyOTcgMTU0LjUyNiAyLjg2NjgyIDE1NS4wMTcgMi4zNzUzOUMxNTUuNTA5IDEuODgzOTUgMTU2LjE3NSAxLjYwNzI4IDE1Ni44NyAxLjYwNTk2QzE1Ny41NjUgMS42MDcyOCAxNTguMjMxIDEuODgzOTUgMTU4LjcyMyAyLjM3NTM5QzE1OS4yMTQgMi44NjY4MiAxNTkuNDkxIDMuNTMyOTcgMTU5LjQ5MiA0LjIyNzk2QzE1OS40OTIgNS42MzM5NiAxNTguMzE0IDYuODQ5OTYgMTU2Ljg3IDYuODQ5OTZaTTE1NC44MTggMjguN1Y5LjY5OTk2SDE1OC45MjJWMjguN0gxNTQuODE4Wk0xNzMuNjY2IDkuMjA1OTZDMTc3LjkyMiA5LjIwNTk2IDE4MC45NjIgMTIuMDk0IDE4MC45NjIgMTcuMDM0VjI4LjdIMTc2Ljg1OFYxNy40NTJDMTc2Ljg1OCAxNC41NjQgMTc1LjE4NiAxMy4wNDQgMTcyLjYwMiAxMy4wNDRDMTY5LjkwNCAxMy4wNDQgMTY3Ljc3NiAxNC42NCAxNjcuNzc2IDE4LjUxNlYyOC43SDE2My42NzJWOS42OTk5NkgxNjcuNzc2VjEyLjEzMkMxNjkuMDMgMTAuMTU2IDE3MS4wODIgOS4yMDU5NiAxNzMuNjY2IDkuMjA1OTZaTTIwMC40MTggMi4wOTk5NkgyMDQuNTIyVjI4LjdIMjAwLjQxOFYyNS45NjRDMTk4Ljk3NCAyNy45NzggMTk2LjczMiAyOS4xOTQgMTkzLjc2OCAyOS4xOTRDMTg4LjYgMjkuMTk0IDE4NC4zMDYgMjQuODI0IDE4NC4zMDYgMTkuMkMxODQuMzA2IDEzLjUzOCAxODguNiA5LjIwNTk2IDE5My43NjggOS4yMDU5NkMxOTYuNzMyIDkuMjA1OTYgMTk4Ljk3NCAxMC40MjIgMjAwLjQxOCAxMi4zOThWMi4wOTk5NlpNMTk0LjQxNCAyNS4yOEMxOTcuODM0IDI1LjI4IDIwMC40MTggMjIuNzM0IDIwMC40MTggMTkuMkMyMDAuNDE4IDE1LjY2NiAxOTcuODM0IDEzLjEyIDE5NC40MTQgMTMuMTJDMTkwLjk5NCAxMy4xMiAxODguNDEgMTUuNjY2IDE4OC40MSAxOS4yQzE4OC40MSAyMi43MzQgMTkwLjk5NCAyNS4yOCAxOTQuNDE0IDI1LjI4Wk0yMTguMjc4IDI5LjE5NEMyMTIuNTQgMjkuMTk0IDIwOC4yNDYgMjQuODI0IDIwOC4yNDYgMTkuMkMyMDguMjQ2IDEzLjUzOCAyMTIuNTQgOS4yMDU5NiAyMTguMjc4IDkuMjA1OTZDMjIyLjAwMiA5LjIwNTk2IDIyNS4yMzIgMTEuMTQ0IDIyNi43NTIgMTQuMTA4TDIyMy4yMTggMTYuMTZDMjIyLjM4MiAxNC4zNzQgMjIwLjUyIDEzLjIzNCAyMTguMjQgMTMuMjM0QzIxNC44OTYgMTMuMjM0IDIxMi4zNSAxNS43OCAyMTIuMzUgMTkuMkMyMTIuMzUgMjIuNjIgMjE0Ljg5NiAyNS4xNjYgMjE4LjI0IDI1LjE2NkMyMjAuNTIgMjUuMTY2IDIyMi4zODIgMjMuOTg4IDIyMy4yOTQgMjIuMjRMMjI2LjgyOCAyNC4yNTRDMjI1LjIzMiAyNy4yNTYgMjIyLjAwMiAyOS4xOTQgMjE4LjI3OCAyOS4xOTRaTTIzMy41OTIgMTQuOTQ0QzIzMy41OTIgMTguNDAyIDI0My44MTQgMTYuMzEyIDI0My44MTQgMjMuMzQyQzI0My44MTQgMjcuMTQyIDI0MC41MDggMjkuMTk0IDIzNi40MDQgMjkuMTk0QzIzMi42MDQgMjkuMTk0IDIyOS44NjggMjcuNDg0IDIyOC42NTIgMjQuNzQ4TDIzMi4xODYgMjIuNjk2QzIzMi43OTQgMjQuNDA2IDIzNC4zMTQgMjUuNDMyIDIzNi40MDQgMjUuNDMyQzIzOC4yMjggMjUuNDMyIDIzOS42MzQgMjQuODI0IDIzOS42MzQgMjMuMzA0QzIzOS42MzQgMTkuOTIyIDIyOS40MTIgMjEuODIyIDIyOS40MTIgMTUuMDJDMjI5LjQxMiAxMS40NDggMjMyLjQ5IDkuMjA1OTYgMjM2LjM2NiA5LjIwNTk2QzIzOS40ODIgOS4yMDU5NiAyNDIuMDY2IDEwLjY1IDI0My4zOTYgMTMuMTU4TDIzOS45MzggMTUuMDk2QzIzOS4yNTQgMTMuNjE0IDIzNy45MjQgMTIuOTMgMjM2LjM2NiAxMi45M0MyMzQuODg0IDEyLjkzIDIzMy41OTIgMTMuNTc2IDIzMy41OTIgMTQuOTQ0Wk0yNTEuMTEgMTQuOTQ0QzI1MS4xMSAxOC40MDIgMjYxLjMzMiAxNi4zMTIgMjYxLjMzMiAyMy4zNDJDMjYxLjMzMiAyNy4xNDIgMjU4LjAyNiAyOS4xOTQgMjUzLjkyMiAyOS4xOTRDMjUwLjEyMiAyOS4xOTQgMjQ3LjM4NiAyNy40ODQgMjQ2LjE3IDI0Ljc0OEwyNDkuNzA0IDIyLjY5NkMyNTAuMzEyIDI0LjQwNiAyNTEuODMyIDI1LjQzMiAyNTMuOTIyIDI1LjQzMkMyNTUuNzQ2IDI1LjQzMiAyNTcuMTUyIDI0LjgyNCAyNTcuMTUyIDIzLjMwNEMyNTcuMTUyIDE5LjkyMiAyNDYuOTMgMjEuODIyIDI0Ni45MyAxNS4wMkMyNDYuOTMgMTEuNDQ4IDI1MC4wMDggOS4yMDU5NiAyNTMuODg0IDkuMjA1OTZDMjU3IDkuMjA1OTYgMjU5LjU4NCAxMC42NSAyNjAuOTE0IDEzLjE1OEwyNTcuNDU2IDE1LjA5NkMyNTYuNzcyIDEzLjYxNCAyNTUuNDQyIDEyLjkzIDI1My44ODQgMTIuOTNDMjUyLjQwMiAxMi45MyAyNTEuMTEgMTMuNTc2IDI1MS4xMSAxNC45NDRaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPgo=" class="h-8" alt="Tailwind CSS Logo" />
    </a>
    <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
        <span class="sr-only">Open main menu</span>
        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
        </svg>
    </button>
    <div class="hidden w-full md:block md:w-auto" id="navbar-default">
      <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
        <li>
          <a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Services</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Pricing</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

This will create a navbar with the Tailwind CSS logo with the selected page being blue (in this case home) and the rest being white on the navbar.

Result:

Tailwindnavbar

References

  1. ↑ Gerchev, Ivaylo (2022). Tailwind CSS. Sebastopol: O'Reilly Media. ISBN 978-1-0981-4099-1. OCLC 1314257318.
  2. ↑ Rappin, Noel (2021). Modern CSS with Tailwind flexible styling without the fuss. Raleigh. ISBN 978-1-68050-857-4. OCLC 1277046918.{{cite book}}: CS1 maint: location missing publisher (link)
Index: pl ar de en es fr it arz nl ja pt ceb sv uk vi war zh ru af ast az bg zh-min-nan bn be ca cs cy da et el eo eu fa gl ko hi hr id he ka la lv lt hu mk ms min no nn ce uz kk ro simple sk sl sr sh fi ta tt th tg azb tr ur zh-yue hy my ace als am an hyw ban bjn map-bms ba be-tarask bcl bpy bar bs br cv nv eml hif fo fy ga gd gu hak ha hsb io ig ilo ia ie os is jv kn ht ku ckb ky mrj lb lij li lmo mai mg ml zh-classical mr xmf mzn cdo mn nap new ne frr oc mhr or as pa pnb ps pms nds crh qu sa sah sco sq scn si sd szl su sw tl shn te bug vec vo wa wuu yi yo diq bat-smg zu lad kbd ang smn ab roa-rup frp arc gn av ay bh bi bo bxr cbk-zam co za dag ary se pdc dv dsb myv ext fur gv gag inh ki glk gan guw xal haw rw kbp pam csb kw km kv koi kg gom ks gcr lo lbe ltg lez nia ln jbo lg mt mi tw mwl mdf mnw nqo fj nah na nds-nl nrm nov om pi pag pap pfl pcd krc kaa ksh rm rue sm sat sc trv stq nso sn cu so srn kab roa-tara tet tpi to chr tum tk tyv udm ug vep fiu-vro vls wo xh zea ty ak bm ch ny ee ff got iu ik kl mad cr pih ami pwn pnt dz rmy rn sg st tn ss ti din chy ts kcg ve
Prefix: a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9

Portal di Ensiklopedia Dunia

Portal : Agama
Agama
Portal : Bahasa
Bahasa
Portal : Biografi
Biografi
Portal : Budaya
Budaya
Portal : Ekonomi
Ekonomi
Portal : Elektronika
Elektronika
Portal : Film
Film
Portal : Filsafat
Filsafat
Portal : Geografi
Geografi
Portal : Indonesia
Indonesia
Portal : Ilmu
Ilmu
Portal : Lingkungan
Lingkungan
Portal : Masyarakat
Masyarakat
Portal : Matematika
Matematika
Portal : Militer
Militer
Portal : Mitologi
Mitologi
Portal : Musik
Musik
Portal : Olahraga
Olahraga
Portal : Pendidikan
Pendidikan
Portal : Politik
Politik
Portal : Sastra
Sastra
Portal : Sejarah
Sejarah
Portal : Seni
Seni
Portal : Teknologi
Teknologi

Kembali kehalaman sebelumnya