Jump to content

Tailwind CSS

From Simple English Wikipedia, the free encyclopedia
Revision as of 04:03, 17 January 2024 by MCGAMER YOUTUBE (talk | changes) (added support for no javascript browsers)
Logo since Tailwind CSS v3


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 examples

Button

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

<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.

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

<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="https://tailwindcss.com/_next/static/media/tailwindcss-logotype-white.944c5d0ef628083bb316f9b3d643385c86bcdb3d.svg" 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.

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