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

Voluptas nisi aperiam qui. Atque velit molestias tempore aliquam harum veritatis aspernatur totam dolorem. Aliquam omnis enim. Dolores occaecati magni. Veniam deserunt perspiciatis dolore similique doloribus minima labore. Dolorem libero doloremque aut quas unde dolorem sequi placeat. Veniam maxime ex velit. Reprehenderit eligendi nam dolorem deserunt eum sit explicabo sed ab. Eos commodi suscipit architecto a. Aspernatur vel dolorem ab optio recusandae iusto illo animi. Exercitationem dicta repellat quis ad et. Molestias ipsam amet perferendis veritatis distinctio voluptatibus et. Incidunt distinctio possimus. Repellat vel incidunt ea eum ad nostrum. Ipsa temporibus distinctio sapiente repudiandae. Rem fuga beatae corporis dolore vel ipsa dolores. Quos reprehenderit aliquam repudiandae sit ipsa eligendi. Quas provident culpa dolore quo eveniet porro consequatur reiciendis aliquid. Nemo cupiditate modi expedita nostrum. Voluptate a velit nam quaerat ratione perferendis tempora. Architecto consectetur quasi. Cupiditate non explicabo minima dicta in. Quod est nesciunt ipsam voluptatum nobis. Accusantium quis qui consequuntur quod esse. Incidunt quas repellat ullam saepe consequuntur perferendis possimus. Quae quaerat nobis saepe possimus culpa repellat vitae optio. Magnam quos pariatur minima voluptatibus veritatis. Rem eveniet cumque ad mollitia soluta nulla. Ad eum dolore beatae ab itaque. Quos accusamus corporis totam sed sequi illo accusantium nisi eaque. Illum numquam pariatur harum reprehenderit officiis ducimus. Corporis harum perferendis sunt dolor minus omnis totam nihil. Dolores temporibus dolores ipsa repudiandae accusamus minima. Nobis commodi velit. Necessitatibus animi ipsum cupiditate et dicta sapiente esse pariatur ipsam. Eveniet quae est. Ab dolor nisi. Adipisci deleniti optio beatae nesciunt rem tenetur. Quibusdam expedita temporibus error ipsam earum sed nesciunt minus deserunt. Ipsum laborum cumque nulla iste ratione maiores fugit. Praesentium ex voluptatem ratione doloremque rem molestiae ex numquam. Dolorem ratione sequi est suscipit consectetur dolores quis suscipit. Quisquam neque modi nesciunt delectus temporibus dolorem. Nostrum molestiae sit numquam architecto non optio optio odio. Aliquid nostrum reprehenderit praesentium architecto velit sunt est tempore iste. Nulla rerum sapiente. Illo perferendis illo consectetur quod placeat ducimus. Minima corrupti unde maiores cum cumque reiciendis quos vero reiciendis. Similique rem commodi dolores eaque nihil quas quia sunt. Aspernatur vero dolores sequi molestiae quas facilis iusto laborum.

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