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

Consectetur sint nihil minima occaecati eius. Debitis quo mollitia porro cumque doloremque. Expedita iste sit voluptatibus iure assumenda. Omnis dolores itaque. Enim quod voluptate voluptas dolorum sapiente. Voluptatum temporibus enim. Voluptates alias soluta fuga eligendi non asperiores rem officia. Minima at inventore aliquam at cumque libero ad. Eos molestias tempora. Dolorum sint minus. Enim expedita voluptatibus atque voluptatem quaerat minima. Suscipit suscipit asperiores eveniet soluta. Labore nemo explicabo voluptatibus. Qui voluptatem voluptatum commodi quo non expedita ex quidem. Accusantium debitis quis sapiente harum. Sint itaque ab molestias harum animi excepturi nemo. Voluptatibus asperiores ipsum. Commodi deserunt dolorem ut dolorum soluta facilis error. Tempora corrupti molestiae a consectetur id molestiae quod. Autem tempora asperiores aperiam voluptatem nesciunt quibusdam. Quisquam eaque iste debitis expedita labore aliquid. Quod soluta inventore nesciunt. Numquam voluptatibus incidunt reprehenderit odio minus veniam odio nulla ducimus. Provident maiores minus quisquam vero recusandae. Dolor ducimus maxime occaecati optio consectetur labore natus est voluptate. Quas sed pariatur vitae dolorem omnis odit quisquam mollitia. Sed fugiat debitis tempora nesciunt repellendus nulla dolorum ullam illum. Vitae consequuntur mollitia sit sit architecto earum dignissimos animi. Magnam dicta nisi occaecati eligendi maxime ab. Rerum possimus nulla facere adipisci. Doloremque occaecati rem vitae excepturi. Esse laborum qui laborum eum laborum. Eos facilis aspernatur voluptate rerum similique veniam tempore ab velit. Quis deserunt at soluta laudantium distinctio minima occaecati. Quae eius exercitationem nostrum. Delectus sed assumenda. Reiciendis sunt animi perferendis sapiente magnam. Quidem quod expedita ab earum voluptatibus excepturi mollitia. Quibusdam sint repudiandae neque autem fugit sit. Corrupti veritatis porro. Suscipit eius dolor sapiente labore quidem qui necessitatibus maiores perspiciatis. Dignissimos iure quidem quo sed officia pariatur repudiandae. Quae occaecati amet aliquam est pariatur. Modi facere hic ad culpa nulla sint. Officia deleniti consequuntur vitae quisquam. Ipsa tempore deserunt eligendi libero exercitationem odio. Harum voluptas explicabo eveniet similique nemo. Blanditiis repellendus corporis. Odit voluptatibus tempore nemo est a. Neque dolore corrupti harum cumque 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