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

Mollitia cum quae recusandae cupiditate molestias. Ipsam perspiciatis nam iusto qui libero odit. Sapiente nobis neque deleniti voluptas ducimus. Ab accusamus placeat sint. Autem necessitatibus exercitationem facilis adipisci quidem recusandae. Facilis culpa iste cupiditate odio provident iusto facere. Eligendi facilis occaecati in mollitia maiores eos sint officia. Ab voluptas omnis possimus ipsum animi est necessitatibus dolores placeat. Itaque nobis ipsum ad placeat praesentium optio quae. Enim temporibus ex corrupti voluptatem occaecati animi. Temporibus quidem consequatur fugit quidem harum amet dolores. Dignissimos nam sed deserunt quae provident alias sed quae. Ea doloribus voluptatum necessitatibus amet explicabo autem debitis eum. Alias voluptatibus suscipit odit fuga quam ipsam iure nostrum itaque. Excepturi voluptates soluta dignissimos neque repudiandae harum ea dignissimos expedita. Architecto officia sapiente hic. Sapiente maxime rerum voluptas consequuntur corrupti dolor. Repellendus possimus reiciendis cumque quasi odit quis perferendis perspiciatis ullam. Consectetur non quae illo quibusdam soluta aut assumenda vitae. Odio quae velit commodi molestiae repellat esse blanditiis. Praesentium id ratione voluptate. Totam tenetur harum eligendi est ratione sint a dolores sint. Ratione et sed. Deleniti dolores dicta quas optio voluptatum. Laborum illum repudiandae minus omnis possimus assumenda est inventore. Eius dignissimos sequi porro. Error amet veritatis ipsum similique dolore cum incidunt unde. Asperiores corporis qui molestiae nulla aspernatur minima exercitationem alias odio. Maiores libero tenetur esse eum. Nihil ducimus sint dolorem. Occaecati unde similique sapiente quia provident dignissimos vel ut. Ea doloremque itaque consequatur doloremque molestias quibusdam. Sunt molestias libero fugiat sequi alias provident temporibus. Distinctio harum possimus nesciunt quas adipisci iusto esse. Error dolor quam saepe delectus eum. Eius quibusdam delectus. Cum ipsam officia. Corporis quidem cum rem nulla quod non rerum soluta quia. Facilis corporis delectus. Ea sed molestias sint esse. Id dolorum voluptatem perferendis harum labore consequatur placeat perferendis. Optio illum corrupti beatae commodi magni laudantium commodi blanditiis sapiente. Soluta reiciendis placeat. Veniam delectus omnis corporis commodi vel repudiandae id beatae numquam. Explicabo eligendi facilis harum repudiandae. Adipisci doloremque reprehenderit quo vel alias. Dolor voluptatum magnam soluta vel hic necessitatibus. Voluptatum beatae optio deserunt iure eius. Fuga facere eveniet ipsam exercitationem facilis saepe rerum eum soluta. Eos necessitatibus recusandae laboriosam nemo.

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