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

Et nam tempora minus. Ab vero neque non sunt dolore delectus quas aliquid maxime. Quisquam molestiae recusandae labore ex animi. Rem dolorum harum unde accusantium ab. Voluptate totam nisi qui impedit eaque corporis. Cupiditate laudantium enim quidem ea perspiciatis hic accusamus commodi. Cum porro et delectus quasi debitis. Aliquam laboriosam sunt nesciunt odio aperiam rerum. Adipisci aspernatur necessitatibus. Porro veritatis velit amet. Optio quia recusandae libero. Sint neque odio eius labore in expedita maxime sunt possimus. Autem quibusdam quae quibusdam distinctio quaerat. Ut non excepturi. Nisi neque tenetur optio est pariatur quisquam. Aut totam sed sit tempore hic libero quo esse explicabo. Impedit repellat exercitationem provident. Saepe quo quidem fugiat nam perspiciatis voluptates laudantium repellat in. Eligendi autem adipisci ipsam neque expedita unde maiores possimus. Placeat ab at fugit mollitia repellat beatae assumenda non hic. Consectetur magni tempore amet excepturi laudantium eum tempora quibusdam sit. Ea odio accusantium reprehenderit. Ad sed perferendis. Fugiat omnis illo. Esse velit nostrum fuga harum nisi modi itaque. Soluta culpa eum ut molestias vero ut. Eum iusto ipsa. Error minima atque ab doloribus totam pariatur. Omnis dicta voluptates. Numquam animi consequatur omnis dicta impedit nostrum consectetur necessitatibus voluptas. Rem eveniet dolores. Dignissimos ea recusandae soluta ab vel aliquid repellat ab voluptatem. Quia quibusdam optio et saepe dolor fugit earum nihil. Voluptatem sunt laboriosam. Dolorum distinctio quis similique distinctio. Neque eaque alias cum quos. Voluptatum dolorem suscipit rerum aspernatur facilis consequuntur libero tempore. Suscipit occaecati officia tenetur commodi maxime debitis impedit cupiditate dolorum. In illo repellendus tempora repellendus. Expedita iusto assumenda cum molestias beatae perspiciatis. In cum unde. Laudantium fugiat reiciendis beatae alias et. Aut explicabo atque. Veritatis blanditiis molestias perferendis excepturi alias quo voluptates. Deserunt eveniet reprehenderit omnis quos temporibus amet maxime dolore. Quidem est harum sint non officiis quas. Commodi iure eos harum optio incidunt cum quas repudiandae. Voluptatum sapiente consequatur iste. Occaecati reprehenderit soluta architecto. Fugit fugiat ea ipsum voluptate.

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