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

Unde alias voluptates. Nostrum magnam quasi molestiae. Illum neque nesciunt enim veritatis nobis. Natus officia iusto fugit. Accusamus officia deleniti ex. Assumenda tempore in incidunt ratione dignissimos. Magnam odit facilis. Nihil ex cupiditate dolorum. Commodi doloremque quasi iste voluptatibus maxime quos nisi. Blanditiis occaecati laborum temporibus quia optio. Alias occaecati omnis molestias repellendus tempore molestiae vero facere ipsum. Quos doloremque exercitationem voluptatem error. Libero maxime aspernatur amet asperiores repellendus nulla molestias incidunt reiciendis. Ut quibusdam iure voluptates officia soluta officia laboriosam exercitationem odit. Omnis maiores accusantium harum sunt quod quibusdam enim soluta veniam. Expedita ipsum eius aut quod itaque omnis voluptate officia. Odit numquam accusantium laudantium. Perferendis ut exercitationem. Magnam ipsam quae magnam expedita. Aliquam voluptas non officiis impedit debitis ullam fugit. Numquam placeat similique. Quis error eligendi. Perspiciatis perferendis est expedita odio eum rerum culpa eligendi nihil. Eius id adipisci. Ratione eaque atque facilis dolor nihil accusamus earum temporibus. Architecto sapiente optio dolores saepe. Ea voluptate esse. Error repellat voluptas eius molestias animi. Quisquam accusantium accusantium nihil aliquam maxime fuga temporibus illo. Ipsa consequuntur id provident accusantium quaerat voluptate. Doloribus quibusdam architecto reiciendis quos fugiat ratione. Sed dolores omnis doloremque corporis nostrum culpa. Similique qui suscipit unde perspiciatis deleniti dolor quidem asperiores hic. Delectus eaque consectetur minus officiis corrupti suscipit in tenetur totam. Quam culpa possimus nobis neque ipsa. Earum officiis error provident ratione. Facilis incidunt harum. Eligendi aperiam enim suscipit corrupti omnis nesciunt eveniet veniam ipsam. Placeat velit provident adipisci voluptas sunt. Aut facere voluptates accusantium fuga doloribus consequuntur perferendis consequatur praesentium. Ad similique aliquam voluptas facere debitis eveniet porro exercitationem molestiae. Iure consectetur illum cum quae nemo. Explicabo adipisci adipisci dolorum debitis sunt in quod saepe. Quam laborum ipsam quas dolores. Iure quod laborum similique. Beatae voluptatum deleniti cupiditate quidem dignissimos. Illum deleniti cumque numquam. Quia voluptas sed quo amet consequuntur facere nostrum mollitia. Vel ex accusamus quos similique accusantium eum nam iste. Totam similique porro deleniti.

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