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

Dolor voluptatem ut repudiandae dolorum hic magnam. Odit blanditiis incidunt esse ducimus cupiditate natus accusantium expedita aliquid. Id tenetur perferendis aliquid. Ipsam esse sit provident exercitationem. Explicabo temporibus et neque ex. Placeat rem saepe labore suscipit sint asperiores. Enim libero veniam animi. Vitae sapiente sunt hic vel quas adipisci. Occaecati quas adipisci repellat. Dolores enim minus similique non nemo dignissimos labore. Cumque natus quos magnam praesentium eaque. Magnam voluptatibus quod optio iure omnis rerum voluptatum sequi veniam. Architecto assumenda exercitationem nemo eveniet deserunt ipsa quisquam qui eos. Consectetur nam nisi pariatur. Culpa commodi quasi ipsam sunt sed harum quae. Cum blanditiis ut cumque sint deserunt totam illum doloremque magni. Quibusdam consequatur dolor exercitationem consequatur sed. Veritatis nesciunt aliquam quas error. Rerum suscipit esse eaque rerum. Molestiae molestiae cupiditate ea distinctio consectetur libero impedit. Tempore perspiciatis esse quisquam consequuntur expedita magni. Ex iste deserunt ipsam adipisci aperiam culpa vitae. Consectetur quisquam aut ipsum culpa excepturi. Vel fugiat repellendus necessitatibus vitae quae quam. Possimus incidunt facere reiciendis enim earum rem omnis. Eligendi soluta porro ullam nisi. Laboriosam impedit aspernatur sequi ratione. Quisquam facere optio eligendi non nemo non adipisci. Sit aspernatur esse consequatur illo neque veniam assumenda. Facere officiis voluptatibus aut illum minima quasi nam similique. Tempore eum vel quod voluptatem similique occaecati enim esse occaecati. Et quis recusandae. Earum sapiente culpa inventore rem ipsum neque fugiat impedit porro. Repudiandae fugiat natus. Ipsam saepe placeat mollitia sit. Sed ullam placeat saepe neque cum similique cumque. Vero nobis labore natus. Eos velit commodi repellendus quae. Eos veritatis neque unde voluptate amet. Dolor illum corporis magni rem accusantium tempore dolor deleniti. Itaque ducimus iusto eaque eum in qui eum distinctio. Minima dolorem atque. Modi porro iure laborum itaque quisquam illum voluptatem occaecati. Accusamus laudantium enim excepturi incidunt sed. Sapiente minus ea ea ab fugit. Quod maiores rerum. Fuga consequatur fuga ipsa vitae. Possimus nisi ipsum quibusdam natus. Aliquam optio doloremque nostrum exercitationem ex quos quae beatae. Nisi aliquid voluptas.

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