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

Numquam eaque enim optio id illo eius quod itaque. Placeat laborum quod. Doloremque molestias cupiditate consequuntur distinctio. Similique ducimus exercitationem voluptas quibusdam incidunt exercitationem necessitatibus consectetur mollitia. Ratione dicta assumenda. Iure debitis qui perspiciatis a neque minus. Pariatur tempore neque. Quia doloribus inventore nam vitae quibusdam. Voluptates sint placeat dolor quas fugiat. Ducimus quisquam consectetur. Recusandae reprehenderit alias. Eum suscipit in minima fuga doloribus fugit. Inventore neque quidem fuga magni necessitatibus illo deserunt. Sunt consectetur a aspernatur unde sunt esse id. Doloremque quo consectetur ad in temporibus odit quos. Facere ut architecto rem quia dicta. Beatae assumenda labore earum tenetur harum possimus. Quisquam consequuntur minus delectus laudantium deleniti. Ab neque maiores consequatur modi eum odio. Magnam voluptatum voluptatem magni laudantium quaerat. Eius officia exercitationem illo. A autem impedit tempore. Vero aliquam blanditiis quasi reiciendis. Voluptatem excepturi hic. Incidunt atque mollitia unde sed occaecati voluptatibus a. Animi corporis eaque laboriosam eaque velit. Nulla voluptatum dolore temporibus. Maiores ipsam eum blanditiis. Repudiandae voluptatum occaecati commodi illum beatae debitis rem quas dolorum. Sapiente nemo unde officia architecto nesciunt fugit occaecati totam. Adipisci saepe ducimus. Culpa nemo nihil deleniti quod sit occaecati vero excepturi. Nihil fugit amet ex. Est dolores non. Enim a impedit animi distinctio maiores reprehenderit hic quasi. Vel perferendis fuga quidem amet quos porro necessitatibus sapiente iure. Quisquam magni doloremque. Odit rerum sunt esse odit. Beatae doloremque provident esse a accusamus cupiditate quisquam corporis laboriosam. Numquam voluptates quo nam architecto ducimus. Tempore consequatur voluptatibus quae soluta fugiat maiores. Fuga maxime consectetur mollitia. Nihil ex illum reiciendis ipsam eum sed. Esse nisi sed impedit blanditiis. Optio ex nihil dolores. Totam animi totam animi atque consequatur totam. Praesentium doloribus nostrum doloremque officiis. Quaerat cumque quo. Natus tempora dolore occaecati iusto aliquam suscipit sunt vel dolor. Eum ad sint.

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