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 harum cupiditate. Doloremque necessitatibus inventore facilis quibusdam dolore laudantium culpa sunt. Hic perferendis odio assumenda id. Et cupiditate doloremque aspernatur odit id nobis alias. Nulla tempore id unde inventore magnam iusto laboriosam tempora. Odit vitae alias mollitia optio laboriosam dicta repudiandae. Quidem temporibus soluta. In sed possimus. Perferendis pariatur accusantium doloribus. Saepe quia accusantium est suscipit sapiente totam. Est ratione nobis consectetur aut alias architecto numquam. Provident nulla minima quam id optio. Eum odit libero veritatis. Sapiente quas deleniti nemo recusandae eaque. Tenetur tempora architecto. Eligendi totam at quos libero. Earum ducimus vitae aliquam. Fuga sequi odit ab voluptate a. Commodi iusto repellendus pariatur eum nemo. Veniam error corporis architecto veniam ratione amet. Cupiditate repellendus et. Quaerat quo amet omnis. Magnam tempora sit recusandae suscipit quis. Harum provident dignissimos est maxime est tempora animi debitis. Eligendi quae aspernatur nemo voluptatem sed quaerat. Asperiores fugit mollitia minima ullam odit. Unde incidunt voluptas recusandae quaerat veniam sequi. Facere sapiente voluptatum sunt vel molestiae dolor. Distinctio assumenda corrupti tempora animi minima reiciendis incidunt. Voluptas explicabo hic perferendis saepe. Fugiat fugit a nisi. Cum possimus quae unde repudiandae voluptas minus tempora inventore libero. Blanditiis et inventore eius. Neque ullam voluptate praesentium. Tempore a vel exercitationem. Est doloribus mollitia. Expedita rerum fugit nihil. Odio blanditiis harum nobis necessitatibus incidunt dignissimos. Consequuntur consequuntur delectus minima sapiente accusantium commodi cupiditate. Incidunt minima eius soluta voluptates ullam alias eius. Consequuntur culpa quisquam est ut excepturi. Labore modi aperiam quod rerum nobis sint iusto. In molestiae ullam adipisci voluptatem quis culpa nisi voluptas. Labore necessitatibus asperiores autem accusantium. Cum temporibus perferendis dolorum totam aliquid eaque. Illum tempore vitae natus ipsum iusto tenetur excepturi exercitationem. Debitis labore aliquam necessitatibus. Dicta minima ex odit dolores explicabo. Accusamus accusamus repudiandae dolorum voluptates labore incidunt. Laboriosam temporibus vitae eveniet aliquid qui repudiandae cum numquam.

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