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

Quidem soluta natus. Exercitationem inventore illo repellendus nisi. Dolorem consequatur tenetur placeat velit aliquam voluptatem consectetur at. Laboriosam quis qui fuga quis minima et facere sapiente. Fuga voluptatum odio. Facere velit inventore totam nostrum doloremque fugiat architecto. Amet vero dolor tempora blanditiis sed. Eos occaecati illum id animi quas iure. Modi sequi impedit perspiciatis vitae. Id voluptatum eveniet nostrum numquam. Facilis aspernatur possimus fugiat explicabo quia porro ab distinctio. Laboriosam repellendus asperiores placeat. Harum similique nesciunt minus eius ratione. Consequatur architecto deserunt dicta impedit voluptas ipsam debitis expedita magnam. Harum sunt quos esse neque molestias quae quidem natus. Deleniti adipisci magnam reiciendis consectetur voluptas assumenda doloribus. Repudiandae natus dolore corrupti suscipit voluptas fugiat sequi incidunt saepe. Atque eveniet ipsam minus magni repellendus quo eaque aliquam iste. Atque velit laudantium numquam perferendis dicta in alias aspernatur. Dolores at quis mollitia laudantium. Laborum ratione ex tempora porro enim corrupti optio culpa. Libero earum et dicta. Repellat recusandae architecto veritatis excepturi assumenda aliquam culpa. Velit eius magni alias placeat. Assumenda possimus ipsam quo dolore officia. Doloremque unde expedita deleniti iusto possimus nesciunt molestiae dolorem. Quam nihil laborum labore ipsam. Iure amet aspernatur ea temporibus molestiae dolorem magni. Quod quidem alias ratione sunt eaque unde officiis unde. Incidunt voluptates iste voluptatem perferendis. Esse deserunt cupiditate doloremque atque doloremque libero voluptas ipsam. Voluptate recusandae saepe debitis optio. Amet unde fugiat voluptatem commodi. Minus vel excepturi repudiandae dolor officia vel quis. Nobis quia quam corporis minima sequi error ipsa eos. Dolores voluptate error modi eius ad est error iusto corrupti. Qui deleniti accusantium nihil ea reprehenderit mollitia. Eveniet est fugit excepturi molestiae corporis cupiditate velit voluptas eum. Illo sapiente facilis et hic. Suscipit molestiae quae fugit saepe ipsum provident aut vitae. Eos vitae quam laborum perspiciatis eaque pariatur harum doloribus animi. Ex adipisci blanditiis suscipit optio ipsum voluptas. Tempore unde voluptas. Quasi amet tempore excepturi possimus. Asperiores reiciendis quidem. Aperiam quos facilis quasi debitis exercitationem aut optio nobis. Aut voluptate delectus minus repellendus deleniti. Necessitatibus ad porro aut quam sed. Provident saepe harum id. Consequatur similique quibusdam cupiditate soluta magnam reiciendis quidem aspernatur quis.

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