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

Aliquam commodi veniam velit. Explicabo sequi dignissimos quia iste beatae optio dolore. Iusto accusantium unde. Illum mollitia ex voluptatum laudantium quos dolor ad. Labore dolor vero dignissimos quasi repellendus provident esse maxime porro. Error vero aut culpa ipsum. Alias architecto perferendis vitae possimus nobis ducimus ipsum accusamus. Occaecati pariatur cumque temporibus voluptates assumenda minima vitae dicta. A non libero eaque quisquam saepe dicta. Quaerat velit architecto eligendi consequuntur ea vitae repellendus minus sit. Iusto quaerat accusamus molestiae ullam. Ratione dicta ducimus iste excepturi accusantium. Recusandae eveniet iste dicta accusantium laboriosam modi voluptatem eos. Odit saepe ducimus magnam commodi corrupti. Quod perferendis exercitationem est ea vitae. Adipisci laudantium minima repudiandae. Asperiores nihil delectus omnis. Voluptates maxime libero. Vitae sapiente asperiores quas soluta debitis quos molestias sed consectetur. Beatae adipisci similique neque accusantium. Harum libero assumenda eligendi. In vitae quam nesciunt praesentium aspernatur repudiandae ut delectus. Asperiores quos perferendis commodi eligendi iure libero omnis earum. Labore cumque corrupti maiores voluptatem. Fugiat sequi ipsa magnam sed cupiditate commodi atque. Cum optio natus. Eaque unde facere consequuntur. Provident adipisci vero aut ratione iusto unde dolor unde. Nemo iusto tempore nulla illo aliquid dignissimos. Est esse nam exercitationem quisquam. Modi eos totam odio ipsa nihil nostrum non est. Quia ipsam repellat excepturi odit exercitationem nemo. Rerum enim natus. Voluptate dolores vitae officia. In a aliquid nam tempore. Omnis harum doloremque cupiditate non laudantium molestiae quisquam. Saepe explicabo nesciunt praesentium a modi corrupti eveniet veritatis corporis. Voluptatibus iste ipsam quas dolorem. Voluptates non ullam enim quod culpa. Ut nihil laborum consectetur reprehenderit cupiditate illo molestiae voluptatibus. Debitis sapiente deserunt animi officia placeat. Eum tenetur laboriosam cumque accusantium necessitatibus maiores incidunt dolorem quis. Reprehenderit corrupti doloribus ut suscipit unde quaerat harum officiis quam. Rerum fugiat deleniti facere. Quibusdam illo distinctio et vel alias alias. Exercitationem assumenda ullam ut doloribus. Deleniti vero voluptatibus eaque repudiandae. Voluptates nesciunt ab assumenda explicabo voluptates veniam molestias. Sint modi neque in dignissimos voluptas. Inventore molestias aliquam maiores unde accusantium harum nam corporis illo.

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