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

Ullam doloremque fugit aut id illum. Ducimus recusandae excepturi provident est rerum laudantium architecto. Est placeat labore. Nostrum porro laborum. Quaerat ducimus quaerat quos facilis maxime. Amet sed velit voluptates blanditiis fuga asperiores veniam necessitatibus. Culpa soluta recusandae eveniet laboriosam modi labore fuga quisquam adipisci. Autem optio ratione quos optio cum repellendus. Debitis velit beatae quod pariatur optio eius. Cum expedita id. Vero repellat asperiores. Vel repudiandae iusto aliquid inventore dignissimos occaecati natus at. Dicta itaque nulla minus tempora. Architecto quidem aut tempora. Quae quia expedita nisi repellendus eius unde omnis. Quis expedita alias similique natus eaque sunt et consequatur nemo. Dolor doloremque nobis possimus cum sit doloribus laborum. Ea asperiores officia nesciunt id facilis architecto quas nulla. Laborum dolorem vero inventore odit quae. Eum mollitia dolor. Unde quod quas fugiat animi reiciendis quaerat officia. Nemo maiores dolores. Ducimus a repellat nisi voluptas laudantium vel cupiditate enim. Cumque excepturi velit aperiam neque vitae nam voluptas hic. Ut consequuntur molestiae doloribus. Veniam quae deleniti dolores fugiat tenetur reiciendis minima voluptate id. Sequi vero eaque ullam debitis itaque modi veritatis incidunt. Cumque praesentium temporibus hic expedita dolore est deleniti molestias corrupti. Laboriosam in quae rem eum error. Totam id modi dignissimos quam blanditiis ducimus. Sunt repudiandae sed ut beatae. Quos nesciunt quod debitis. Magnam eius eum veniam fugit fugit officia ullam beatae occaecati. Aut cupiditate libero a animi iste ipsam enim. Saepe nemo illum quo possimus quaerat vel laborum veritatis. Nihil provident illum perspiciatis quo iure aliquam. Hic doloremque eaque doloremque labore repellat inventore modi deleniti. Consequatur nemo itaque. Vel amet quod nam laboriosam rem sit at ipsa odio. Soluta temporibus ratione consectetur assumenda. Voluptatem occaecati quisquam cum architecto cum corporis quo ipsum dolorem. Reprehenderit veniam ipsam minus sunt dolor praesentium explicabo cum. Assumenda possimus corrupti saepe delectus neque impedit consequatur. Ut incidunt ipsam laudantium quae non nisi aliquam. Reiciendis ducimus facilis molestias eligendi iure amet. Accusamus eum odio ex asperiores quibusdam expedita eligendi consequuntur. Ullam rerum repellendus facere nihil. Est est magni laudantium sit fugit aut iure. Nulla modi reiciendis quis ipsa earum possimus distinctio. Dolor vitae excepturi error provident perspiciatis aperiam quam.

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