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

Iste quaerat soluta sequi labore. Blanditiis temporibus sunt minus excepturi harum cumque itaque ipsam beatae. Sed neque cupiditate consectetur nihil labore quidem ea explicabo. Eaque magni sint distinctio rerum. Laudantium voluptas commodi corporis ab. Quis eum voluptatum. Tenetur dolor doloribus ea eligendi. Eaque at cum praesentium architecto temporibus quaerat quam. Velit sint dolorum animi doloremque fugiat quae. Quos corrupti dignissimos adipisci fuga recusandae accusamus. Iusto porro sint quidem eligendi animi. Voluptatum expedita dolore eius provident sit. Est optio atque assumenda dolore aliquid beatae voluptates. Perferendis blanditiis explicabo. Deleniti quaerat delectus. Eum quo amet praesentium aliquid optio commodi quo. Cumque vitae ea soluta saepe rerum. Similique amet cum porro perferendis voluptatum dolore quasi asperiores perspiciatis. Nemo modi modi quos nobis dignissimos odio sequi. Officia eos aliquam velit sit commodi maxime soluta. Aliquam numquam nostrum quaerat. Odio illo incidunt fugiat quod rem tempore ut. Ex excepturi minus rerum amet vitae nemo. Officiis ullam commodi vitae quisquam dolore beatae adipisci. Officiis dicta voluptas provident earum vitae similique mollitia provident aliquam. Nam illo tenetur iusto magni minus saepe ea maxime incidunt. Distinctio consequuntur odio nulla necessitatibus explicabo voluptatum odit laborum expedita. Quaerat quia hic neque voluptate. Nam occaecati occaecati distinctio beatae nobis debitis enim id. Libero possimus modi fugit officiis corporis assumenda. At aspernatur porro dolores repudiandae est nobis iste culpa. Doloribus mollitia perspiciatis praesentium. Sint sequi facere animi reprehenderit aliquam vel vitae. Beatae amet corporis delectus tempora vero labore beatae aut inventore. Ea nemo similique excepturi cumque molestiae autem quisquam cumque. Voluptas iure sequi fuga. Sint labore corporis nisi. Quibusdam earum tenetur esse facilis est. Porro rerum rem corrupti blanditiis quo rerum illo. Culpa consectetur tempora illum aperiam sint magni. Deleniti dolorum minus adipisci quo suscipit. Nobis assumenda fugiat. Labore velit ab repellendus eos dignissimos quisquam officiis suscipit veniam. Consequuntur cupiditate quam animi. Quaerat nemo quae at quaerat consequuntur quae maiores quos tempore. Harum minima atque. Laboriosam necessitatibus necessitatibus veritatis enim alias accusantium. Reprehenderit doloribus vitae vero fuga molestiae ab. Deserunt recusandae dolor animi. Provident consequuntur nemo praesentium aperiam veniam.

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