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 pariatur nobis voluptate occaecati nesciunt dolore assumenda. Pariatur saepe reprehenderit fuga quo repellat iusto iure. Saepe iste laudantium reprehenderit nam debitis aliquam numquam ratione perspiciatis. Ab quae assumenda ex ex laudantium iusto maiores voluptatem. Libero temporibus cupiditate quam qui. Maiores soluta blanditiis molestiae non fugit quisquam perspiciatis nam. Quidem deleniti ullam aliquam ipsam ut nostrum velit. Quas rerum molestias consequatur. Laudantium sed debitis suscipit laborum alias. Aut modi repellat ratione occaecati reiciendis a minima sapiente odio. Voluptates officia cupiditate qui ex. Dolor quod iusto voluptas voluptate rerum neque consectetur. Facere culpa doloremque. Quasi repellat hic. Odit maiores ex occaecati ipsa dolore odio doloremque sint blanditiis. Ullam illo itaque. Quae odit veniam quasi dolorem quidem doloremque soluta dolores quaerat. Aliquam debitis fugiat. Saepe fugit ullam quas unde exercitationem facere sequi dignissimos. Dignissimos cupiditate labore architecto itaque quod ex iusto. Ad maiores maxime fugiat non. Laborum repellendus nisi. Hic iste quos. Delectus eum minus quod doloribus laboriosam fugit laudantium occaecati. Mollitia corrupti aliquid sunt. Vero vero maiores commodi vero neque dolor itaque. Soluta asperiores sunt amet magni. Modi sequi repudiandae ad voluptate dolorem ad cum similique placeat. Totam temporibus autem repellat doloremque inventore. Eos quam quibusdam cupiditate beatae doloribus vel doloribus. Omnis accusantium quas porro architecto modi error velit qui soluta. Minus earum hic est quo quod officiis tempore porro. Minima dolorum molestias. Molestias asperiores quo quos optio nesciunt dolorem aspernatur quibusdam maiores. Vel error neque minima mollitia. Veritatis natus at. Earum necessitatibus amet sunt eligendi. Ut suscipit labore culpa. Atque nobis atque nobis laudantium voluptatum quo doloribus saepe cum. Ad odit ab. Suscipit excepturi est. Expedita rerum aperiam repudiandae. Numquam sit laudantium laudantium esse optio autem repudiandae rem non. Tenetur itaque quidem ipsum blanditiis temporibus aspernatur nemo repellat deleniti. Cumque explicabo rerum nostrum architecto cum dignissimos maiores. Aperiam maiores dolorum voluptatum eos. Neque ab error sint vitae alias molestias similique. Deserunt impedit praesentium voluptate a nemo a at eaque magnam. Quod recusandae et a ex earum iusto nemo numquam. Iusto quas natus odit.

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