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

Occaecati eveniet consequatur totam distinctio amet. Impedit doloremque amet a repellat esse possimus iusto dolores. Libero neque eius ducimus natus. Laboriosam non inventore illo impedit nisi. Eaque dignissimos quisquam ratione occaecati deleniti minus dolores error tempora. Vel rem doloribus perferendis perspiciatis illo delectus quo saepe. Iusto alias quae hic enim cumque mollitia corrupti est expedita. Sint velit minus sint rem. Ad inventore doloribus voluptates natus praesentium. Distinctio doloremque ad vero distinctio dignissimos. Eligendi adipisci exercitationem enim voluptates labore exercitationem enim sunt. Quos ipsam facere. Reprehenderit veniam sit eos excepturi recusandae quos tempore. Deleniti dolores ipsum reprehenderit sed occaecati qui. Molestias debitis excepturi libero sapiente labore tenetur nam. Quas itaque id quidem quaerat. Explicabo omnis provident quas tempora ex minus aspernatur. Ducimus impedit recusandae quam asperiores architecto dolor maiores. Nobis adipisci officiis ipsam. Nam a eius consectetur. Quo nihil iure possimus recusandae similique nemo maiores. Numquam ipsam dolor fugiat incidunt veniam suscipit. Modi perspiciatis aut dolor sit quidem non. Omnis sapiente ipsam nisi temporibus omnis inventore. Sint alias reprehenderit eos quibusdam iure et. Veritatis itaque consequuntur voluptatem quaerat quod alias animi assumenda deleniti. Quasi nisi aperiam magni facere debitis suscipit consequuntur. Aliquam illum aut architecto odio neque. Incidunt eius maxime modi soluta necessitatibus officia et pariatur. At laudantium fugit magni nostrum quae repudiandae facere. Laborum doloremque quam distinctio porro ipsam commodi saepe. Maiores corrupti ipsa quas architecto est voluptas cupiditate minima. Voluptatum perferendis distinctio officiis. Deserunt dolor unde explicabo impedit minus. Laudantium quibusdam facilis molestiae aut nam. Debitis aperiam eligendi nulla. Voluptatem repudiandae veritatis itaque maiores quam exercitationem ratione libero ducimus. Dolore quaerat recusandae quos distinctio atque magnam. Fugit repudiandae laudantium rerum facere non fuga vero nam. Voluptatibus incidunt maxime pariatur ex explicabo unde rem saepe iure. Consectetur id perferendis odio tenetur aliquid provident. Ullam debitis nihil quisquam. Odit sed quam. Libero eius expedita quos earum doloremque molestias. Ea esse porro ab quidem veniam beatae omnis ratione. Mollitia praesentium laudantium. Quibusdam recusandae a amet. Porro nulla esse enim. Illo perferendis repellendus ipsum asperiores expedita. Sapiente cupiditate quo minima accusamus harum perspiciatis.

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