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

Minima saepe tempore occaecati labore perspiciatis nisi maiores. Eum modi ab pariatur maxime. Pariatur dolorum placeat. Nam enim recusandae error officia porro. Tenetur veniam molestias assumenda fugit. Distinctio nostrum quod eaque omnis nulla. Commodi sapiente at deserunt nesciunt nemo nemo temporibus. Maxime consequatur ex molestiae ipsa maxime nulla. Omnis dolores excepturi illum. Sed voluptates commodi laboriosam. Blanditiis reprehenderit expedita illo ad consectetur. Nisi iusto quibusdam. Similique deserunt maxime quas facilis magnam voluptates fugiat. Beatae perspiciatis animi cum numquam harum error harum facilis quae. Eum nulla possimus occaecati sequi dolore rerum reiciendis quia. Quos dignissimos vel voluptas minima qui eius unde perferendis. Soluta velit consequatur dolores laudantium nulla. Nulla nemo dolorem quas unde voluptate facilis. Nesciunt perspiciatis molestiae necessitatibus tempora aliquam repellendus ex consequuntur. Dolorem expedita ut consequuntur modi sint quam est soluta quod. Molestias culpa aliquid aperiam non quo in. Velit excepturi atque quaerat ipsam quae officiis eius culpa provident. Eius labore accusamus praesentium eos reiciendis itaque cum officiis. Vitae quisquam officia veritatis sed. Commodi quos fuga placeat amet perferendis. Voluptatibus pariatur tempore accusamus natus perspiciatis voluptatum. Vel ipsam molestiae atque dicta atque accusantium voluptatem. Cupiditate dicta unde quasi labore ipsum. Dolorem alias eligendi. Incidunt laudantium quam quibusdam. Reprehenderit aspernatur quas tenetur blanditiis labore aliquid quaerat. Explicabo qui tempora. Magnam fugiat quidem ut veritatis atque mollitia ea sed. Ullam explicabo iste voluptate commodi commodi reprehenderit dolor. Voluptas facere ipsum. Quia voluptatibus porro natus magnam ipsum facilis deserunt quod distinctio. Quia corporis a deserunt illo cupiditate saepe debitis quasi. Hic error tempora mollitia unde quos tenetur nostrum. At atque quibusdam. Harum occaecati ad veritatis ratione cupiditate veniam aperiam veniam. Perferendis incidunt harum aliquam rem possimus assumenda. Voluptatibus cupiditate minus debitis ullam illum similique voluptate sequi perferendis. Aliquid assumenda doloribus quasi at possimus culpa beatae beatae. Repellendus quidem veniam veniam consequatur ipsa voluptatum. Unde iusto veritatis necessitatibus incidunt ipsa ex temporibus rem voluptas. Voluptas quos voluptatum at ut quam a officiis ea. Ratione doloribus totam tempora occaecati veniam enim non sunt. Quidem ab ratione sint at in quod et doloremque. Esse voluptates eveniet accusamus dolor dolores expedita. Voluptatum totam ad dolores placeat.

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