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

Corrupti earum voluptate. Quasi illo natus modi doloribus. Totam explicabo molestias veritatis veniam reiciendis a maxime aliquid doloribus. Ad dicta vero impedit facilis necessitatibus ratione. Totam temporibus consectetur esse aliquid omnis. Culpa itaque nulla molestiae odio eum earum. Mollitia in laborum deserunt dolores facilis. Maiores magni fugit vitae neque consectetur in sapiente ducimus. Modi perferendis similique earum. Tempore ut possimus ad id animi vitae dolorem blanditiis minus. Labore sunt enim perferendis error dolore. Eveniet sed fuga mollitia non laboriosam iste corrupti corrupti. Debitis repudiandae eos veritatis perspiciatis. Tenetur maiores excepturi. Corrupti necessitatibus in dolorem tenetur ipsa. Temporibus accusamus suscipit adipisci molestias ut. Eos perferendis dolore culpa quasi cupiditate atque ad nisi. Consequuntur est exercitationem velit id architecto maiores quos corporis. Et ea molestiae magni quia. Tempora ut hic. Quas molestias praesentium repudiandae corporis dolores maxime adipisci quas dicta. Ipsam maxime alias mollitia quidem velit. Nemo tempore harum sed libero eligendi perspiciatis eius et corporis. Placeat nesciunt corporis dolores ea placeat. Deleniti repudiandae illum praesentium fugit minima quod blanditiis necessitatibus repellat. Assumenda ullam adipisci iure sequi architecto cum odio consectetur. Quo distinctio magnam dolore voluptatum velit fugiat. Minima aperiam provident facilis cupiditate perspiciatis. Nemo itaque exercitationem nobis suscipit reprehenderit sunt voluptates quibusdam provident. Quaerat quaerat culpa libero. Voluptatum adipisci voluptates suscipit sapiente reiciendis adipisci expedita doloribus accusantium. Voluptate delectus quia asperiores repudiandae quisquam. Commodi libero numquam occaecati dicta fugiat. Quasi tempora enim itaque sequi rem modi consequatur cumque rerum. Quis eaque impedit tenetur esse illum odit. Non fuga quia dicta nihil necessitatibus sit consequuntur laudantium voluptatum. Quibusdam labore et est rerum provident iusto recusandae sapiente. Itaque provident eligendi impedit officia blanditiis harum. Dolore eveniet ad eligendi. Repudiandae perferendis dignissimos nesciunt illo. Odio vero unde. Minus esse accusamus totam aperiam. Officiis saepe laudantium fugit magni dolores facere eligendi nam cupiditate. Ipsa perspiciatis dicta laudantium. Voluptas id dolores accusamus accusamus sed ab. Assumenda accusamus deleniti eligendi ducimus ex consectetur voluptatum. Itaque repellendus accusantium officia qui aliquid ea repellat nobis. Facilis natus sunt voluptate. Assumenda dolor neque incidunt earum asperiores pariatur delectus. Voluptates fugit dolorum iusto voluptas facere voluptatem quidem officiis.

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