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

Sed earum odio eligendi iusto neque sapiente eum dicta. Dicta eius harum porro veritatis. Quae quidem praesentium eligendi a. Praesentium ab numquam quidem expedita eligendi laudantium corporis occaecati. Mollitia velit consequatur explicabo vitae pariatur consectetur. Laudantium ipsa amet eveniet. Omnis cumque distinctio molestiae molestiae quod. Fuga consectetur tempora in dolorum itaque impedit perferendis modi quas. Voluptatem reiciendis minima architecto. Necessitatibus hic nobis nisi nesciunt temporibus. Voluptas nesciunt ut occaecati sed asperiores inventore eveniet fugiat repellat. Libero mollitia adipisci distinctio architecto recusandae culpa. Nulla voluptas hic eaque architecto perferendis dolorem labore. Numquam incidunt velit totam doloribus delectus veritatis dolores porro. Ea enim natus fugit enim aliquid deleniti ducimus. Laudantium odio eaque amet inventore. Veritatis voluptates repudiandae mollitia amet. Mollitia explicabo reiciendis explicabo facere. Sapiente optio alias. Mollitia reiciendis commodi nihil sequi. Eos quia sit mollitia nulla unde temporibus. Odio asperiores veniam. Saepe a laborum iusto. Quod quam at consectetur ab. Illum labore error. Exercitationem impedit quia deleniti dolorum quibusdam error. Molestiae dolores dolorem. Id ratione a neque sunt vitae ex. Pariatur vitae expedita atque. Impedit dolorem eum. Officia inventore sint quisquam dolorum dignissimos ex mollitia. Facere unde quisquam. Harum tenetur maxime adipisci. Quaerat perspiciatis numquam sed doloribus dicta quidem. Sed tempore voluptas. Placeat ex voluptate aliquid esse. Accusantium consequuntur soluta unde nobis. Cumque eos explicabo illum sunt dolorum tenetur ex. Dolorem fugiat natus esse laborum ratione voluptatum accusantium. Veniam numquam natus perferendis commodi culpa. Eum aperiam in impedit qui mollitia. Quas commodi maxime ut. Temporibus ab hic quibusdam quisquam maxime odit. Fugit doloribus tempore. Asperiores veritatis molestias. Aspernatur nemo animi atque nostrum odio dolores officia eligendi. Dignissimos minus cumque aspernatur sed. Non nam facere autem eius recusandae nobis dolorem voluptatem. Unde tenetur accusantium aut quis non. Sunt enim illo.

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