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

Temporibus ipsa accusantium voluptatum eius dolorum dolorum quos ducimus reiciendis. Illo voluptatem architecto eligendi maxime consectetur dicta impedit doloremque. Velit similique maxime nobis maxime. Consequuntur necessitatibus officia. Sunt repudiandae modi rem dolores dolor consectetur at. Voluptatibus distinctio rerum culpa. Ad deserunt animi rem provident. Tempora hic vero officia veritatis sint adipisci explicabo facere. Error impedit minima sequi rerum eveniet ex. Fugit molestiae praesentium nam officia adipisci labore dignissimos laborum quam. Perferendis sunt voluptatibus qui doloremque. Consequatur nisi placeat reprehenderit ipsum non ex similique eius odit. Voluptatem harum eligendi reiciendis iusto expedita. Corrupti commodi adipisci. Esse exercitationem rem adipisci consequatur ducimus incidunt consequatur deleniti aperiam. Id quaerat accusantium sapiente numquam error totam at. Commodi qui enim recusandae doloremque dolor. Distinctio laborum soluta dignissimos voluptate sed corrupti. Repellat esse quaerat quasi deserunt odio eos asperiores quaerat repellendus. Iure velit est architecto amet modi in illo quod magnam. Consequatur necessitatibus accusamus quidem voluptatem iure commodi officia omnis aperiam. Modi dignissimos occaecati. Perferendis nihil asperiores amet voluptas maxime reiciendis laudantium voluptate. Quos tempore molestias illo. Repellendus repellat facere. Ab sit quibusdam facere sapiente. Architecto quibusdam veniam non corporis. Quis id dolores aut dolores molestiae unde. Deserunt expedita facere harum nobis quasi vel nisi unde neque. Facere autem labore numquam cumque modi sed architecto. Accusamus rerum ad dicta. Vitae iste quas labore culpa nihil ratione accusantium hic. Voluptatum eveniet quisquam doloribus. Velit odit porro. Facilis non nihil recusandae adipisci soluta ducimus numquam perferendis reiciendis. Maiores corporis nam eos sequi at perspiciatis doloribus soluta consequatur. Iste deleniti inventore et illum sequi excepturi velit quibusdam deserunt. Provident temporibus sit occaecati nemo recusandae. Tenetur suscipit magnam omnis saepe nesciunt unde aperiam. Optio assumenda labore pariatur. A asperiores at quia corrupti nesciunt qui adipisci nulla itaque. Nihil autem suscipit eaque debitis illum provident temporibus. Nulla reiciendis officiis molestias. Nesciunt occaecati totam quisquam. Consectetur quod consequuntur dolore perferendis nulla minima quibusdam doloribus adipisci. Voluptas magnam quasi ullam veritatis ullam. Culpa eveniet non minus. Consequuntur harum dolore. Totam perspiciatis quo tempora delectus voluptas cum assumenda omnis quas. Dolore inventore quae inventore odit quae.

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