Tailwind

Core

Provides a variety of globally scoped styles.

Source Page Source

Body Background

Your app's background is automatically set via a design token class. Adjust your theme's color scheme to customize. This affects both light and dark mode.

css 
body { @apply bg-surface-50-900-token; }

Selection

Selection color is also set via a token class. Try selecting the text in the card element below to preview this styling. Notice how selection color changes depending on the background.

The quick brown fox jumps over the lazy dog.

Try selecting the text above.

Mobile Focus

Interactive elements on mobile will briefly show a focus style when touched. Skeleton adjusts the coloring.

Scrollbars

Skeleton automatically provides custom scrollbar styles in supported browsers. Use .hide-scrollbar to disable scrollbars.

Test Scrolling Here

Quo illum eos recusandae voluptate laudantium expedita expedita alias sapiente. Nisi eos facilis facilis magni omnis cupiditate praesentium. Pariatur quasi eos expedita assumenda officia. Nulla culpa explicabo nisi sequi aliquam numquam facere a nulla. Repellendus ex doloremque mollitia magnam dolore iste tempore aut perspiciatis. Porro iusto rem accusantium. Illo id animi maiores esse asperiores hic totam alias voluptatem. Quis in blanditiis rem aut. Accusantium quidem quibusdam unde. Cupiditate cupiditate magni corrupti in. Quis aperiam quasi modi soluta quas cumque cum doloribus illo. Ullam quisquam impedit vel ea quaerat consequatur ipsum molestiae laudantium. Maiores deserunt soluta. Quisquam nisi cumque fugiat molestias doloribus voluptas pariatur consequatur sint. Vitae et maxime. Quibusdam debitis animi possimus saepe molestias voluptates numquam in rerum. Suscipit maxime ad facilis distinctio. Accusamus quia consectetur cumque corporis mollitia. Officia tempora fugiat debitis tempore qui porro. Distinctio aliquid culpa dolore nemo esse iusto. Suscipit est aut asperiores doloribus quia. Doloribus similique quasi quia nobis omnis expedita saepe cupiditate. Necessitatibus ut molestias provident incidunt molestiae. Sequi ipsum inventore officiis iure maxime quibusdam aspernatur quo eaque. Aperiam omnis a perspiciatis. Natus facilis at nostrum tenetur quis occaecati. Debitis non adipisci dolor earum et fugit. Possimus ex hic totam. Veniam expedita culpa soluta vel tempore. Aut neque alias error. Quos animi atque impedit impedit nam nam quaerat tempore. Voluptas praesentium dolores earum nemo sequi porro asperiores quaerat vel. Dolore provident quia fugiat consectetur tenetur ea quas. Fugit quos excepturi dolore ducimus cupiditate fugit nisi eveniet suscipit. Sint quibusdam laborum eligendi debitis quidem. Rem expedita vitae nobis tenetur dolores. Magni eveniet temporibus odit aliquid culpa voluptatum voluptates. Dolor alias necessitatibus voluptas delectus quam et culpa qui. Quam fuga voluptate culpa laudantium quis excepturi nesciunt. Iste eveniet quisquam architecto. Quisquam aspernatur aspernatur ad adipisci. Magni quasi molestias quos sint sapiente. Voluptatum temporibus nulla quibusdam. Harum illo fugit modi nulla itaque optio sit nam sit. Ipsam sed deleniti. Ut quod natus non laudantium similique quae est vel. Esse quaerat modi magni sed sapiente. Necessitatibus quasi ex itaque quo quisquam magnam assumenda. Qui deleniti cum omnis adipisci labore eos. Soluta consectetur qui enim.

Dividers

Native hr horizontal rule elements respect your theme settings automatically. Use border size to adjust the width.

Divider Styling

Dividers may be dashed, dotted, or doubled.

Vertical Dividers

Divide columns with the .divider-vertical class. You can apply it with a span tag. Adjust the height as desired.

Left

Right