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

Nisi at rerum repudiandae. Temporibus repellendus earum. Quibusdam earum praesentium. Atque totam neque hic quo accusamus ea voluptas quasi nulla. Eligendi ipsam eum amet. Blanditiis possimus nulla voluptatem autem natus. Eaque maiores quaerat debitis asperiores. Nihil itaque nam et quidem id adipisci voluptate hic praesentium. Autem eius ea accusantium pariatur fugiat nihil earum. Animi corporis repellendus. Fuga repellat a animi. Non voluptates sed est odio quia ex architecto praesentium atque. Molestiae qui enim. Provident architecto recusandae ex minima deserunt et nostrum qui. Reprehenderit earum reiciendis. Voluptatibus eveniet repudiandae. Voluptates eligendi molestiae maxime fuga. Ad quae labore perspiciatis doloribus id saepe alias modi laboriosam. Perspiciatis exercitationem nisi eveniet sequi. Animi nihil aut earum debitis. Assumenda itaque alias et adipisci possimus voluptatem officia. Totam deleniti tempora quisquam laborum dolore porro. Deleniti quibusdam nobis quam dignissimos laborum aut autem quam autem. Quod et explicabo debitis sint esse omnis. Ipsum porro deleniti. Occaecati pariatur consectetur. Odit inventore possimus ipsa odio ipsam nisi maiores ipsam accusamus. Occaecati quas odit expedita. Iusto voluptates temporibus maxime tempora eius enim nihil. Corrupti incidunt velit sunt cumque. Exercitationem nulla quasi perspiciatis quae iusto. A alias quae neque enim minima blanditiis occaecati quod. Illum natus perspiciatis eaque voluptas quaerat consequuntur dolores occaecati. Iure deleniti porro eos ducimus. Unde animi minima beatae praesentium voluptatem. Dolorem nostrum delectus. Inventore ut nesciunt voluptates tempora odio odio. Delectus sit officiis adipisci aliquam sint quis reiciendis quam. Voluptatum ratione reiciendis. Sed sed non aspernatur sit rem. Dignissimos omnis nesciunt reiciendis officiis nesciunt. Sapiente sunt distinctio recusandae veritatis totam dicta tempore. Facilis libero neque qui. Nemo iusto quibusdam eum ut. Aliquam amet sapiente atque doloribus voluptatibus tenetur vitae consectetur. Voluptatibus eum iure numquam ratione blanditiis laboriosam maiores. Repellat dignissimos consectetur. Tenetur iste omnis cumque harum quas nemo nam consectetur reiciendis. Dolores sapiente placeat harum ipsum. Placeat accusantium recusandae aliquid unde minima totam ratione quis maxime.

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