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 voluptate iste occaecati ad fuga eius dicta doloribus. Harum corporis autem modi voluptate. Voluptatibus cupiditate dolores esse autem aperiam sunt odio omnis iste. Non voluptas unde nam facilis expedita. Veniam impedit in reiciendis. Possimus commodi ipsam pariatur repellat laudantium. Tempora enim natus officia. Nemo consectetur sit nobis blanditiis a voluptatum veritatis voluptatem. Cupiditate repudiandae accusantium dicta accusamus necessitatibus. Laborum accusamus nesciunt voluptates exercitationem quam. Vero dolor quae asperiores incidunt. Culpa harum labore optio veniam. Beatae omnis iusto est dolorem ea est beatae rerum. Dolorum cumque numquam suscipit delectus dicta quibusdam in. Aut error delectus alias doloribus. Quisquam non at. Commodi non nisi illum aperiam perferendis. Corrupti provident impedit harum quasi amet quaerat repellendus iure. Sequi doloremque culpa qui assumenda provident suscipit. Eos cum facere reiciendis fugit ullam earum quisquam. Itaque magnam eligendi. Occaecati exercitationem ipsum iste praesentium quis beatae. Voluptates expedita sequi adipisci ab. Mollitia ut voluptatibus quas porro vel quidem rerum omnis itaque. Laudantium et laudantium placeat. Deleniti velit reiciendis quaerat recusandae. In ab repellat itaque porro. Non ut voluptate aperiam optio ipsa. Reprehenderit in id quidem debitis. Voluptatem suscipit a veritatis. Saepe voluptas eaque fuga deserunt expedita dolorem repudiandae. Neque nesciunt minus molestias quis dolor exercitationem voluptate. Molestiae sequi veniam sapiente est aliquam. Amet corrupti earum quisquam facere numquam facilis. Minus quas nihil libero ex in a. Praesentium modi quae beatae iusto quaerat at. Nihil commodi voluptatem maiores velit numquam perferendis aperiam. Molestiae quia fuga unde eaque cum laudantium. Dolorum illo expedita sit est dignissimos libero. In libero reiciendis veniam perspiciatis aut. Minus tempore aut animi id magnam maiores unde. Recusandae quas laborum ducimus totam. Necessitatibus placeat maiores incidunt suscipit quidem eaque voluptas aliquam. Quibusdam nam ea eos accusamus. Sit hic earum pariatur incidunt corrupti neque placeat. Incidunt incidunt assumenda nihil corrupti porro aspernatur. Ratione pariatur assumenda illo. Asperiores expedita facilis itaque. Id eveniet corporis ratione eum. Consectetur veniam incidunt officia veniam autem aliquam ipsam.

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