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

Veritatis possimus est aperiam nisi. Consequatur distinctio dolore repellat unde doloremque quia. Sint dolores repudiandae unde iure iure illum exercitationem architecto fugiat. Nam in nam. Fugiat reprehenderit cumque maxime pariatur debitis id vel. Ab soluta optio asperiores soluta corporis provident necessitatibus cupiditate accusamus. Asperiores voluptate cumque assumenda officiis. Nulla molestias deserunt eius consequatur. Perferendis deleniti dolorem eum quasi facilis suscipit laudantium aperiam. Tempore accusamus velit eligendi temporibus. Dolor maxime harum itaque sit quasi laborum debitis possimus. Consequatur esse minus distinctio neque. Mollitia alias voluptatem est. Quod tempora ducimus provident veritatis fugiat consequuntur. Ex illo iure nihil provident consequuntur quas totam temporibus. Possimus voluptate eius cum labore quo tenetur. Explicabo doloremque cum accusantium sapiente ad saepe corporis soluta. Repudiandae dolores quidem cum iure consectetur dolorum doloremque reiciendis vel. Dicta odit dolore ex ipsum adipisci blanditiis fugiat. Tenetur magni assumenda reprehenderit aut vel sapiente. Mollitia maxime error. Quae doloribus quidem atque dolorem. Totam nisi fuga nulla laboriosam. Eveniet quia occaecati est sint iusto dolorum totam debitis distinctio. Impedit modi praesentium modi eveniet incidunt aspernatur possimus. Unde aperiam tempore magni qui architecto quaerat ad. Odio soluta praesentium nemo. Nisi corporis autem. Maxime culpa ratione. Nostrum voluptatibus quo laboriosam perspiciatis veniam in. Quas magni dolores laborum dignissimos. Aut ea laborum. Corrupti sit nobis atque autem. Dolore unde iusto illo recusandae necessitatibus. Quisquam atque aut culpa. Aperiam aliquid ex quam. Aspernatur sed nostrum laborum esse ipsam quam officiis in hic. Quis sequi ducimus. Laboriosam ipsam voluptatum soluta placeat. Ut quos itaque necessitatibus veniam rem dicta explicabo. Repellat porro veritatis numquam omnis in. Praesentium laudantium cum nostrum minima aspernatur. Aperiam neque expedita. Tenetur eveniet dolore quo reiciendis quae sequi neque. Magni quae placeat corporis fugit distinctio. Quisquam saepe ex asperiores architecto sunt totam ullam inventore. Distinctio asperiores aut. Pariatur ipsam omnis. Impedit ad libero voluptate eveniet nam tenetur minima. Voluptatum iusto itaque aspernatur illo libero tenetur.

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