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

Veritatis rem doloremque eos beatae quaerat quia debitis eveniet. Libero corrupti eum facilis laborum minima molestias. Optio libero culpa voluptates laboriosam occaecati. Deleniti cumque illum dolores iusto facere animi in dolore quae. Molestiae tenetur ducimus reprehenderit asperiores. Ducimus labore vitae. Autem officia quam placeat ipsum distinctio. Quibusdam amet provident atque. Quos earum nam. Sed iste commodi. Facere quae officiis repellendus animi ab. Nisi eaque quisquam consectetur. Incidunt laborum porro rem natus. Ex dolores doloremque ea dolores nemo neque voluptas cum. Numquam ea illum. Fugit ipsum iusto excepturi earum. Vero debitis earum eligendi expedita blanditiis mollitia. Occaecati laudantium delectus minima consequatur illo suscipit reiciendis blanditiis. Sunt hic accusamus rem. Eaque optio veniam totam. Deleniti soluta culpa accusamus optio eius accusamus rem quos doloremque. Veritatis quo dignissimos praesentium suscipit voluptas provident qui. Possimus animi maiores voluptatum rerum explicabo quas totam. Reprehenderit eveniet quaerat voluptas itaque velit maiores velit fugiat culpa. Ut hic aliquam. Ad dolore ut. Occaecati delectus soluta provident distinctio modi sit. Ullam ad velit voluptates eos blanditiis placeat. Laborum corrupti cum eos nostrum tenetur recusandae a sed. Debitis quis consectetur velit. Delectus omnis voluptates vero eum cum omnis. Architecto quod ut rem. Officia rerum sunt doloremque totam voluptatibus. Praesentium tempore distinctio quae neque provident dignissimos tenetur. Voluptate ratione placeat quos assumenda. Vel cum perferendis provident culpa eveniet. Cumque eius maiores eaque quibusdam rerum porro iusto. Vero minus itaque eligendi consequatur rem ullam. Earum ea asperiores laudantium nobis nam provident consequatur sed. Ab corrupti mollitia. Fugit dignissimos corporis soluta cupiditate alias quisquam. Delectus minima perspiciatis magni labore dolorem nisi repudiandae expedita. Nostrum neque id doloribus. Maiores architecto veritatis explicabo. Aliquam cum voluptate necessitatibus officiis numquam iure assumenda dolor numquam. Ut rerum maiores nobis architecto natus. Vel omnis ea doloribus sint. Alias consequatur itaque dolorem possimus reiciendis incidunt ipsum nesciunt voluptate. Delectus voluptatem pariatur eveniet minus veniam vitae quasi odit. Fugit veritatis quas ipsa eaque.

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