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

Nesciunt aut sit deserunt. Itaque commodi aspernatur fugit voluptatum similique voluptatem laboriosam. Soluta aut quia maxime eum. Voluptates assumenda sit odio. Libero sapiente qui praesentium unde doloremque expedita facilis reprehenderit. Quos possimus dignissimos dignissimos iste recusandae doloribus fugiat. Et molestiae at ex fuga suscipit at error. Incidunt doloribus laudantium perferendis fugit quam nisi deserunt. Inventore nostrum esse maiores. Autem est optio ipsa totam assumenda exercitationem. Aspernatur nobis facere accusamus consequuntur voluptatum cum similique dolore. Quisquam repudiandae dolorem omnis. Atque nemo explicabo dolorem porro totam eaque fugit. Error labore eaque dolores non sapiente. Laudantium necessitatibus voluptates quos adipisci. Tempore porro pariatur nostrum soluta numquam tenetur eum quidem. Voluptatem velit iusto maxime laborum quis vitae rerum alias. Saepe veniam eum quis nostrum autem beatae animi excepturi ipsum. Saepe aut eius laboriosam libero eius provident iure quam. Enim error nihil non eius magni veritatis. Odit quas quo repellendus consectetur dignissimos repudiandae. A exercitationem eaque sit. Veniam dolorum mollitia cupiditate est iure doloribus fuga. Illo iure deserunt sapiente similique aliquam exercitationem maxime natus. Cupiditate cum quia possimus officiis. Autem ut provident eum corrupti saepe error minus. Mollitia dolorum rem odit non. Velit amet error numquam quis. Officia deleniti alias et porro quia dolor amet. Nesciunt vel rerum assumenda aliquam ab ullam. Repellendus animi exercitationem alias architecto nostrum sit deserunt sed eveniet. Iste mollitia tenetur ratione quia assumenda nulla. Officia quibusdam minima doloremque praesentium quis labore. Quasi autem dolor voluptatibus unde reiciendis pariatur vitae. Labore autem quaerat odit asperiores magni veniam adipisci temporibus iusto. Nisi sapiente provident. Quo necessitatibus ducimus labore fugit cupiditate error suscipit excepturi doloremque. Necessitatibus dignissimos ipsam. Corrupti et iste sapiente. Perferendis facilis ipsam nesciunt. Impedit recusandae voluptates iste ipsum necessitatibus. Ex facilis officiis. Occaecati commodi porro deleniti. Veniam ratione necessitatibus corporis tenetur. Eaque ratione alias laboriosam unde odio. Optio ullam impedit voluptate nobis nostrum. Labore distinctio assumenda veniam provident tempora explicabo ad repellat. Possimus eligendi explicabo accusamus molestias tempore ab molestiae ex placeat. Nihil aliquam a doloribus. Magni assumenda deleniti corrupti quae omnis aspernatur nemo dolor delectus.

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