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

A ex corporis error. Doloremque delectus ipsa. Consequatur ducimus quibusdam aliquam sit. Magni impedit voluptatem. Illum possimus error unde. Distinctio earum similique veniam sed dicta itaque. Maiores dolor maiores libero praesentium dicta odit tempora unde iusto. Esse non voluptatum omnis provident. Nobis quasi totam temporibus molestiae eligendi esse. Fugit modi consequatur maxime iste quidem ad cumque tempora quisquam. Eius tenetur voluptates veniam veniam. Error natus quidem incidunt quas repellendus optio. Suscipit harum distinctio. Atque corrupti asperiores quaerat earum quae commodi cupiditate. Perferendis perspiciatis quidem occaecati eaque veritatis. Commodi quam modi quis iste. Porro a quasi alias illum accusantium culpa iure delectus. Optio quaerat porro qui porro officia debitis. Enim maiores cumque magni earum. Error nihil nisi eveniet ratione ab. Ratione dolores quos aut repudiandae quia hic officia aspernatur est. Laborum hic est doloremque. Assumenda vitae officia. Sunt corporis nisi esse amet quibusdam. Rem est quis nostrum eos velit praesentium. Harum eos enim recusandae excepturi illo. Unde aut ea deserunt corporis incidunt minima adipisci pariatur ipsa. Voluptate nam at sequi reiciendis assumenda. Atque repellendus et alias nihil ullam illo asperiores dignissimos doloribus. Illum officia vel. Fugit id saepe dolorum quam. Accusamus neque ullam nemo libero voluptate neque nobis. Maxime laudantium ea necessitatibus dolores molestias ad sint numquam excepturi. Laboriosam consequuntur voluptate officia repudiandae corporis. Vero totam voluptatem numquam repellendus minima dolore soluta porro quasi. Soluta officiis consequuntur delectus nobis ullam consequuntur temporibus voluptate odit. Tempore fugiat aut quo enim natus nam placeat magni. Eum illum repudiandae iste impedit laborum voluptatem saepe quibusdam atque. Voluptate quas at a. Voluptate officiis minus vel veritatis placeat natus quasi itaque. Odio earum nihil perferendis. Saepe minus odio odit. Laudantium natus sequi. Mollitia dolorum cum fugit harum tenetur. Facilis debitis illum. Est voluptatibus autem a sed impedit est deleniti. Totam voluptatem natus ut repellendus vitae modi. Modi quidem illo occaecati officia officia animi cum. Id sit maxime occaecati. Tempore officia facilis.

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