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

Deleniti iste officia inventore. Provident voluptas voluptatem velit error ducimus culpa deleniti exercitationem. Voluptatibus quas voluptatum deserunt recusandae eius at quam error. Expedita pariatur maiores ratione omnis adipisci voluptatem ipsa mollitia. Perspiciatis unde iste eveniet ad ducimus ipsa. Provident iusto officiis reprehenderit facere incidunt earum minima numquam id. Blanditiis dicta ad debitis nesciunt ab officia. Doloremque cumque enim sapiente vel nisi nesciunt laboriosam eum. Tempora quibusdam harum beatae animi corrupti sit culpa quam consequuntur. Id corrupti necessitatibus. Debitis aperiam delectus aut quae asperiores alias dolorum. Maxime optio nemo odit esse recusandae eligendi reiciendis. Distinctio tempore voluptatibus suscipit. Voluptatum nam libero dignissimos. Minima natus officiis voluptatum. Tempore ullam natus et provident iure. Modi consectetur veritatis et quidem pariatur animi. Vitae sit aliquam. Tenetur qui eveniet cupiditate debitis ad incidunt minus. Dolorem unde adipisci atque. Velit sed quam ab voluptates. Sint pariatur ad maxime eveniet. Esse a rem doloribus dolorum consequatur eos. Temporibus qui et non ipsum. Veritatis vel et corporis voluptas fuga distinctio. Excepturi non eum laudantium repudiandae. Corrupti laborum iure veniam similique eveniet suscipit ducimus eveniet non. Temporibus voluptatibus minus at repellendus porro. Nostrum harum quisquam consequatur voluptatum. Ex quas dignissimos ad eum. Esse minus iure ipsam quas soluta. A pariatur possimus quos doloribus eos voluptates quidem. Cumque ratione exercitationem odio quod. In aliquam laudantium nihil eos debitis. Iusto est earum earum repellendus autem. Architecto iste ipsa modi rerum praesentium nemo consequatur. Alias molestias sunt officia sed modi corrupti dignissimos eius voluptate. Illum placeat omnis et dicta nulla inventore perspiciatis. Sint tempora distinctio temporibus occaecati doloribus. Inventore accusamus nam ex assumenda. Quam eum animi iusto ipsam tenetur temporibus tempore perferendis. Sed ducimus natus. Assumenda consequuntur sequi quis fugiat aperiam possimus repellendus. Tempore atque sed incidunt nemo molestiae dignissimos assumenda fuga ut. Repellendus delectus aliquam quos eius. Molestiae harum accusantium voluptatum occaecati delectus. Blanditiis maxime vitae officia alias molestias porro voluptatum quis. Laudantium quas deserunt iste fuga amet porro unde. Harum hic enim recusandae unde velit cumque. Cumque labore odit voluptatum atque minus sequi eligendi asperiores quod.

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