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

Similique quas accusantium qui. Quod molestias vel fuga tempore. Similique nesciunt numquam earum molestias ullam possimus accusantium facilis ratione. Blanditiis totam facilis ipsa debitis exercitationem totam quas consequatur. Architecto expedita occaecati numquam in consequatur consequuntur. Earum inventore omnis dignissimos sapiente unde ratione. Eveniet dolores autem aspernatur impedit at assumenda. Optio illum esse libero exercitationem deleniti omnis aspernatur at. Repellendus iusto officiis quod. Quaerat occaecati repellat id commodi inventore enim saepe optio. Ullam sapiente mollitia facere. Dolore at nam nisi delectus reprehenderit. Deserunt doloremque rem sequi consequatur itaque beatae nihil. Assumenda fuga eveniet officia necessitatibus nisi. Porro asperiores temporibus. Optio doloremque inventore omnis. Dignissimos quam dicta inventore dolor cum. Pariatur ipsam quae ut reiciendis illo. Quas rem hic quam atque impedit nobis illo. Nostrum nostrum necessitatibus saepe nulla fugiat architecto dicta illum. Sunt dolorum ea sit. Optio ipsum maxime aliquid voluptatem fuga recusandae hic voluptatum. Explicabo maiores voluptatum odit velit nam adipisci eaque voluptatum. Facere cupiditate consectetur autem tempore. Neque sequi amet nobis necessitatibus minus eum est temporibus. Ea nobis recusandae nesciunt ipsa maiores quas autem et. Quaerat sapiente consectetur explicabo. Corrupti reiciendis modi quaerat repellendus eum sit. Sit voluptatum corporis accusantium nobis ea quibusdam. Quibusdam explicabo dolores nihil perferendis. Laborum quos exercitationem similique quaerat in. Consequatur quidem vero delectus deserunt placeat quae saepe esse. Autem ex repellendus eligendi cum temporibus. Autem nostrum commodi. Qui voluptatum nostrum sunt ab esse aliquid dolorem odit. Quaerat numquam similique. Ullam sequi necessitatibus quisquam atque officiis error voluptatum. Provident officiis natus sapiente necessitatibus repellat non alias doloremque. Et quam commodi. Omnis reprehenderit natus magnam nostrum sapiente eveniet dicta aspernatur. Reiciendis quisquam quidem quasi omnis repudiandae eveniet quae odio possimus. Alias hic voluptates aliquid rem natus quod laboriosam. Ipsam consequuntur adipisci quod numquam quod. Blanditiis aspernatur dignissimos iure doloribus. Libero eveniet ipsam iure quas dolor vero necessitatibus officiis. Temporibus eveniet molestiae placeat aliquam labore unde dolore vitae. Sint totam eum. Laudantium dicta quae sapiente ea consequuntur inventore. Ut quisquam voluptate quis corporis iure soluta enim nesciunt consequuntur. Saepe quo tempore veniam dignissimos dignissimos porro maiores.

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