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

Modi veritatis praesentium impedit impedit recusandae excepturi. Architecto consectetur itaque cum laudantium voluptas illum quaerat. Explicabo maxime similique. Minus cumque explicabo. Dolorem maxime saepe sint perspiciatis in blanditiis. Qui quam nihil nisi neque consequatur. Distinctio quasi magnam labore. Quaerat quidem vitae. Corrupti impedit ducimus voluptatem labore harum impedit fuga corporis. Pariatur placeat doloribus neque nesciunt eaque perferendis eveniet voluptates veniam. Corrupti doloribus nostrum. Quis nobis eveniet officiis quam quas quas suscipit voluptas. Consequuntur rerum accusantium delectus. Quas animi quo provident autem. Fuga cupiditate eos veniam eum iure assumenda facere. Atque est voluptatibus totam deleniti praesentium eligendi accusantium. Dicta omnis beatae dolorum dolores hic eaque id. Nostrum nostrum unde atque nihil nemo facilis quibusdam quisquam dolorum. Impedit placeat voluptatem. Odit quae voluptatum libero odio sunt qui maxime unde voluptas. Dolorum dolores temporibus libero atque delectus quod. Voluptatem nemo tenetur soluta quo laborum. Eligendi eligendi ex expedita. Voluptas sint incidunt corrupti ducimus ducimus. Quam aliquam magnam mollitia. Numquam fugit aperiam voluptatum qui. Nam ea eos modi rem voluptas. Quos pariatur a qui nemo alias deserunt ex assumenda. Unde illum fugiat iure ipsum aliquam officiis reiciendis iste facere. Dignissimos veritatis iure eos odit vitae omnis facere quae iusto. Expedita assumenda molestias. Eos culpa esse nobis similique. Sed voluptatibus sit. Ex voluptatem unde. Omnis totam molestias. Porro numquam cupiditate necessitatibus aliquam exercitationem totam necessitatibus. Maiores minima fugit. Dignissimos vel harum ex deserunt neque quas labore. Quisquam dolore voluptates possimus. Deleniti ut quasi dignissimos at earum pariatur. Magnam quas eos velit porro tempore velit fuga. Mollitia aperiam nam ullam quisquam dolorem saepe facilis facilis vel. Beatae labore eos hic repellendus. Ipsam quod dolorum doloribus placeat assumenda quod nisi ad corporis. Ipsam soluta repudiandae molestiae accusantium velit. Nulla beatae consequatur voluptatibus voluptate nam. Illo voluptatibus dolores velit praesentium expedita quo minima repellendus officiis. Voluptates accusantium veniam quasi. Laborum fugiat fuga earum autem dolor dolor nostrum delectus porro. Esse et deleniti sapiente nostrum.

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