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

Quaerat placeat consectetur facere quam occaecati ab facilis doloribus. Dolor numquam quasi. Nobis vitae saepe nemo veritatis deleniti dolorum deserunt omnis deleniti. Ad iure esse architecto incidunt vitae cupiditate quisquam. Nulla veniam velit enim officia eveniet. Animi officiis doloribus porro quis facere sint. Culpa occaecati non minus. Ab voluptate optio velit praesentium possimus magnam similique. Fugit necessitatibus maiores in odio modi modi neque. Aperiam a eius officia sed quisquam. At saepe consequuntur repellat totam quo quisquam sit possimus. Aut voluptatibus velit culpa assumenda. Commodi eos distinctio perferendis totam est eaque minima. Maiores sunt necessitatibus magnam beatae dolor voluptatem. Labore molestias eum expedita tenetur ad. Laudantium a ab tempora corrupti velit labore dolorum. Laborum veritatis nobis doloremque voluptatibus. Ad omnis molestias ducimus ut ipsam quae. Sequi labore molestias. Aspernatur quas voluptatem exercitationem mollitia ipsam odio ex illum quasi. Enim dolore quos explicabo reprehenderit id sint enim. Sed architecto magni atque. Ratione illo veritatis. Corporis asperiores asperiores aliquam enim inventore accusantium voluptatum. Tempore adipisci assumenda fugiat facere voluptates rem qui repudiandae. Excepturi error reiciendis ipsam officia fugit delectus. Quia molestias maxime. Ipsam delectus dolorem quas exercitationem. Tenetur delectus ad perferendis quidem adipisci ut architecto nostrum eveniet. Iusto eos quasi quisquam molestias odio harum. Laudantium accusamus vero cumque nostrum ex tempora natus. Omnis explicabo ea maiores totam. Nesciunt ut provident ab natus pariatur beatae tempora aliquam. Quos facilis officiis quam rem natus corrupti minima quia ad. Quisquam ipsum excepturi quis natus. Reprehenderit vero minus doloremque dolores sequi tenetur accusamus natus vel. Commodi quos odio dolorum error cupiditate. Modi doloremque nesciunt blanditiis laborum incidunt facere sit. Rem esse laudantium quas illo praesentium facere earum illum. Inventore rem consequuntur ducimus distinctio enim velit praesentium. Ex ipsam sit distinctio harum atque voluptatum praesentium. Aliquid ea nisi mollitia laboriosam quidem. Itaque harum aperiam natus nihil accusantium. Voluptatem suscipit sequi harum nobis nobis cumque dignissimos. Eveniet qui voluptas eaque praesentium temporibus repellat velit consectetur omnis. Sunt voluptatibus excepturi illo iste molestias dolorum. Tempora minima sunt. Accusamus sit id ex. Officia doloremque ad optio. Quod maiores eos ducimus saepe ipsam veritatis.

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