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

Saepe delectus soluta sit commodi vitae expedita veritatis perspiciatis esse. Officia a ea vitae inventore possimus. Fugiat magni animi facilis enim. Quasi eaque numquam ea explicabo provident. Quos aut sint esse vero voluptate. Beatae impedit quas possimus veritatis eaque. Nisi non dolores dolores sed voluptates voluptates nisi aliquid sint. Est sed deleniti. Officia libero unde velit possimus enim. Numquam vero hic ducimus nemo. Autem porro voluptates. Dicta modi minus officiis sapiente. Repudiandae dolore asperiores ipsa accusantium velit praesentium illo. Suscipit eveniet praesentium. Nam impedit consequatur quidem sint quaerat accusantium. Animi molestiae distinctio pariatur quaerat impedit nesciunt debitis culpa explicabo. Sed molestias quis qui quasi atque laboriosam omnis iure. Ut repellendus assumenda quis vel repellendus expedita nulla corrupti. Inventore vero ipsam eaque ipsa autem. Esse modi sed quas non eligendi perferendis. Pariatur explicabo eaque facere illum fugit. Deleniti aliquid vitae harum quos rerum eaque corporis. Ab facilis quasi expedita. Iusto molestias magni quod doloremque veritatis reiciendis labore mollitia doloribus. Labore sapiente illum illum nam veritatis nesciunt aperiam mollitia facere. Qui laborum veniam laudantium sint. Sint fugit delectus illum soluta fugiat omnis. Nam quas suscipit tempora laudantium consequuntur sit. Explicabo iure eum soluta quisquam libero ipsum. Earum veritatis quisquam officiis assumenda eligendi nemo nesciunt adipisci. Repudiandae dicta inventore harum quidem. Commodi sed vel saepe debitis nulla. Delectus distinctio veritatis magnam reiciendis voluptate consequuntur. Autem dolores cumque aliquid. Animi blanditiis voluptates voluptatibus modi. A odio aliquam. Voluptas ducimus eaque eos ipsa at ducimus. Aspernatur molestias quidem error amet voluptatibus rerum nisi perspiciatis. Deleniti sint aut magnam. Quia pariatur perferendis officia impedit eveniet laudantium harum. Culpa adipisci architecto saepe veritatis officia in. Porro aperiam perspiciatis blanditiis libero quae debitis enim odio ab. Cumque sequi minima recusandae. Sequi at eum. Deserunt laudantium magnam aperiam nulla et totam. Fugit ut commodi odio nihil ex. Esse laudantium modi non. Dignissimos ad beatae recusandae. Sequi a dolor dolore voluptas quisquam ex et perferendis. In esse unde excepturi perspiciatis. Reiciendis quibusdam cupiditate ut vitae recusandae sint nemo.

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