Wikipedia

Tailwind CSS

utility-first CSS framework

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

Tailwind CSS logo since v1


Tailwind CSS examples change

Button change

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:

 

Navbar change

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:

 

References change

  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)
Retrieved from "https://simple.wikipedia.org/w/index.php?title=Tailwind_CSS&oldid=9306685"