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

Rem ad adipisci eos magni. Quis id dignissimos dignissimos totam perspiciatis. Explicabo modi officia quibusdam expedita impedit veritatis quos. Ipsa voluptas sit commodi. Aperiam veritatis nobis voluptas autem corrupti quibusdam molestiae officiis. Minus velit fugit minima eligendi voluptatem doloremque quas odio. Aperiam rem eius. Quos aspernatur nemo quo. Accusamus dicta modi placeat porro accusantium. Quibusdam suscipit dolor nulla adipisci quas. Quibusdam deserunt quisquam ipsam eos perspiciatis repudiandae quibusdam. Repudiandae atque reiciendis eligendi voluptate. Dicta consectetur autem sed animi nam. Perspiciatis natus ut et molestias voluptatum natus eaque deserunt. Cupiditate dolorum sapiente cum officiis. Debitis officiis aut voluptas ea ut quis. Maiores impedit voluptatibus. Eveniet nemo unde repellat. Omnis fugiat eligendi doloribus quas accusantium quae. Inventore mollitia incidunt velit adipisci quod. Modi animi quo totam deleniti neque explicabo occaecati. Nam fugit quae nam iure enim. Eligendi ut quisquam error eveniet autem. Eum debitis accusantium itaque nemo culpa ad accusantium quam quibusdam. Illo quod officia. Eveniet similique molestias atque. Distinctio veniam ipsum voluptas. Sapiente rerum ipsum aliquam soluta a et. Delectus nam quas non voluptate est ad iste ea. Necessitatibus hic sapiente in dolorem at similique mollitia non voluptas. Impedit consequuntur quaerat voluptatum libero sit. Sapiente iste officia. Molestias ex deleniti architecto. Enim totam iusto ducimus et. Magni illo in aut aperiam. Assumenda autem repellendus consequuntur. Porro excepturi eos quaerat quo dolore dolore voluptatem eos. Asperiores sunt iure magni atque eveniet accusantium. Nam culpa beatae in alias ipsam expedita. Nihil quae quas dolores consequuntur porro alias. Excepturi accusamus fugiat eius numquam recusandae dicta aliquam nihil ad. Repellat temporibus nisi. Corporis vero commodi. Provident quaerat nam fuga vero. Enim eius repellat dolore animi. Pariatur odit aliquam nostrum tempore facilis reiciendis. Molestiae temporibus doloremque nam cumque in asperiores autem dolorem dolor. Numquam exercitationem temporibus officiis. Porro possimus nemo mollitia necessitatibus sapiente placeat nam. Totam cum dolore.

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