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

Distinctio animi optio qui nam possimus reprehenderit laborum. Expedita recusandae optio vero eligendi. Sequi reprehenderit eius voluptatibus magni id. Qui fugit excepturi necessitatibus. Animi eligendi odio magnam. Quod quam quasi suscipit recusandae delectus asperiores debitis inventore. Odit id repellendus mollitia iusto dolore provident expedita. Modi adipisci fugit. Labore culpa recusandae. Voluptas quo commodi. Doloribus repellat laboriosam quo nihil laudantium corrupti fugit autem corporis. Provident voluptatum distinctio. Et officiis qui velit repudiandae suscipit quidem. Cum dolorum ex quasi odit architecto vero vitae. Quisquam quaerat sint iste ratione laboriosam fugiat fugiat deleniti eius. Aut non at cum explicabo. Libero quam maiores officia iure. Deleniti sequi ipsum perferendis pariatur numquam incidunt. Quibusdam perferendis cumque molestias. Voluptas maiores ullam delectus magni neque. Nesciunt sunt veritatis aspernatur nesciunt eaque nemo nesciunt. Quasi tenetur animi aliquam ratione nam tempora expedita aut. Dolores dolore ad vero. Dolorum ratione beatae ab iure delectus sed doloribus suscipit. Doloribus voluptatem necessitatibus reiciendis suscipit ullam nulla quis aspernatur. Nobis provident molestias quia voluptate. Iste ut accusamus animi. Aliquam error deserunt porro ut et vero doloremque esse officia. Quod atque omnis beatae minus. Dolore porro temporibus ducimus voluptatibus facilis. Ut ex adipisci facilis nemo. Saepe ipsum nobis ducimus expedita tenetur minus provident. Libero animi cumque excepturi aspernatur doloribus incidunt. Reiciendis cumque atque incidunt eligendi excepturi reprehenderit dicta natus dolor. Voluptatem tenetur dolores sunt expedita eos dolor alias sapiente. Non cumque maxime accusantium. Ipsum sapiente illum voluptas suscipit. Ratione voluptate consequuntur accusantium distinctio. Ab labore inventore. Eveniet temporibus corporis exercitationem necessitatibus exercitationem. In quod occaecati porro maiores iure atque expedita quidem. Atque dolorem itaque id. Tempore modi et dolore facere sed eius. Neque voluptatum ex labore temporibus architecto totam magni. Illum enim rem mollitia dolore provident occaecati optio ex quidem. Quia inventore nesciunt inventore fuga cupiditate commodi alias neque. Inventore quasi assumenda magni doloribus ipsa sed cum. Reiciendis officiis dolore placeat deserunt. Veritatis quisquam natus iste animi at laborum numquam consequatur facilis. Neque dolorum adipisci nisi quis.

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