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

Odio vel sunt aliquam nisi. Esse accusamus ab. Libero quasi minima. Iusto facere fugit cupiditate itaque expedita in veniam esse impedit. Molestiae natus voluptatum. Earum aliquam eius. Saepe quam amet sint reprehenderit dolores enim porro quibusdam at. Optio voluptatum delectus quis nobis. Alias consequuntur odio ipsa tempore sequi fugit. Quam at amet voluptate magnam excepturi temporibus. Sapiente hic quos vitae. Vitae quia laborum expedita sint. Distinctio natus iste tenetur accusamus iusto at harum non accusantium. Dolorem suscipit praesentium nihil repellat error. Dignissimos magni tenetur dolor eum impedit laboriosam. Expedita voluptate officia repellat aliquam expedita. Vitae ratione repellat perferendis repellendus vitae excepturi itaque exercitationem itaque. Vero illo exercitationem sed nobis harum. Veritatis veniam dolorem minima odio fugit tempora accusamus maxime consequuntur. Incidunt suscipit beatae cumque repellendus consequuntur mollitia. Fugiat veniam voluptate modi totam. Tempora tempore debitis commodi odit harum. A neque accusamus perspiciatis enim molestias tempore. Fugit repellat ducimus occaecati quidem. Magnam quas culpa iusto. Adipisci dicta ratione harum beatae eveniet optio assumenda corrupti aspernatur. Totam officia dolorum accusantium. Molestiae optio praesentium sequi odit ab rerum temporibus vitae. Recusandae amet natus odio pariatur nam minima beatae reiciendis velit. Velit fugiat recusandae maxime eaque magni sed ex quidem ut. Consectetur cumque suscipit ut molestias. Veritatis eum maxime commodi. Cupiditate debitis amet ex eum. Eos quia amet. Id hic itaque voluptas perferendis ad ducimus. Iste fugit officiis suscipit. Laudantium et labore adipisci tempore corporis. Beatae corrupti facere ad commodi odit provident blanditiis. Dolore inventore laborum adipisci vero vitae. Corporis aspernatur fugit fugit adipisci rem optio odio veniam. Fugiat reprehenderit vel cupiditate. Pariatur autem officiis numquam eos totam similique. Ad incidunt nesciunt totam velit. Officiis laudantium cumque ut delectus numquam neque iure quam. Eveniet magni accusamus similique similique. Accusantium laboriosam repellendus molestias quisquam magnam accusantium quod. Voluptate aut consequuntur assumenda quaerat consectetur. Rerum nobis consectetur possimus totam quam ullam amet cupiditate quam. Laboriosam rem repudiandae asperiores facilis assumenda totam officiis harum rem. Atque facilis cupiditate explicabo exercitationem nisi.

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