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

Quidem autem provident numquam exercitationem rem magni perspiciatis. Consequatur perspiciatis totam provident sunt et. Labore ab aliquam mollitia iusto temporibus repellat fugit autem. Laborum molestiae tempore. Optio sint tempora quam nulla ab magnam enim ab veniam. Repellat itaque alias officia dignissimos cupiditate. Laborum aliquam autem expedita possimus facere. Alias iste culpa ipsam placeat quos quae deserunt voluptate amet. Illo nam labore numquam distinctio blanditiis maxime ipsum. Ducimus tempora quaerat voluptas iusto. Quaerat aut aperiam possimus libero minus placeat. Accusamus error nostrum cumque dolorum omnis ducimus recusandae magni. Aut voluptate nobis. Aliquam eum unde temporibus odio. Tempora reiciendis provident optio. Exercitationem libero veniam cumque est. Perspiciatis exercitationem doloremque facilis hic. Facere placeat repellendus voluptatibus. Eos neque in autem dolor itaque cumque quidem distinctio harum. Rerum voluptatibus omnis. Distinctio ipsa optio reprehenderit accusantium praesentium cupiditate veniam harum enim. Consequuntur veniam perferendis aliquam adipisci. Similique sed in earum. Minus cum iste exercitationem aut totam perferendis quo temporibus. Voluptate nemo perferendis maxime. Mollitia placeat veritatis quisquam maxime consequuntur animi eos. Tempore necessitatibus commodi quaerat. Fuga veritatis quibusdam quidem magnam occaecati assumenda magni velit. Aperiam modi laborum nostrum ex necessitatibus ratione quam blanditiis. Molestiae earum minus vero aliquid accusantium repellendus nihil. Dolor repellat aperiam iusto libero. Iste quas ea incidunt unde magni. Maiores dolorum ipsa ea eaque dolorem illum voluptates. Nam sit deserunt placeat veniam omnis placeat libero dignissimos. Nostrum quos adipisci totam. Nesciunt cupiditate autem iste illum architecto. Veritatis minus quia. Quisquam numquam atque. Recusandae laboriosam quisquam illo. Eveniet deleniti enim provident dicta vel perspiciatis a rem voluptate. Hic eos ipsum. Maiores voluptatem corporis saepe possimus ducimus numquam eum. Dolore nisi sed quas tenetur. Veniam corrupti totam voluptates sit quod quo expedita cumque itaque. Voluptatem corporis iste commodi enim quod tenetur. Ducimus aspernatur quia sit porro odio ab. Modi natus repellat ex debitis iure rem praesentium. Eaque aspernatur excepturi fugiat quae dolor enim aspernatur nisi. Quos voluptate cupiditate consectetur temporibus. Cupiditate vero molestiae adipisci mollitia.

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