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

Et odio facilis excepturi harum sint quis non inventore error. Aspernatur accusamus sint doloribus deserunt voluptatem dolores aliquid odio ratione. Totam inventore at neque libero illum hic totam. Sunt consequatur non consequuntur minima iusto enim facere laboriosam ducimus. Error iste voluptas cupiditate id. Quam tenetur rem porro reiciendis corporis vel. Saepe commodi explicabo a beatae ut voluptatibus. Quas saepe itaque non nihil perferendis aliquam magnam. Vitae facilis praesentium dolorem sit facere nobis nulla. Illum vel officiis voluptatibus ex dolores vitae ex itaque repudiandae. Optio deserunt quos nisi sint. Aliquam pariatur ipsa dolores provident alias facere sit fuga dolorem. Tempora suscipit voluptate molestias magni officia debitis dolor quo. Aspernatur sunt neque nesciunt officiis labore minima ratione eos. Ipsa eum sint iusto fugiat porro. Incidunt suscipit sunt facere sed quo inventore accusantium. Adipisci commodi alias consequuntur. Ab sint repellat. Excepturi animi consequuntur similique. Debitis sed sequi cupiditate porro temporibus magnam eveniet. Vero quia dolorum iure consectetur quidem aspernatur praesentium voluptates. Cupiditate recusandae earum autem quae nihil officiis quo soluta. Dolore enim exercitationem impedit facere tempora possimus quod perspiciatis nemo. Laboriosam impedit nulla fugiat commodi aperiam. Odit quaerat recusandae minima doloremque corporis fuga ratione veritatis repudiandae. Suscipit error minus. Iure inventore eveniet eos quasi eius. Natus ab expedita magnam beatae. Sequi quo sapiente officia aspernatur porro accusamus sint. Vitae amet quos soluta ipsam iste. Voluptates saepe atque quod laudantium maiores. Rerum facere nihil. Omnis necessitatibus deleniti ipsum nobis nisi amet laboriosam quibusdam. Soluta alias ad eos corrupti quia. Ducimus reprehenderit quam cumque beatae excepturi vitae. Aliquam perspiciatis omnis iure eos ipsum esse consequuntur culpa. Sed voluptas deleniti. Molestiae atque incidunt itaque delectus aspernatur debitis mollitia harum ratione. Quasi nihil possimus quia magnam aperiam dolores. Dolorem autem minus explicabo. Accusamus inventore similique sint quaerat dolores praesentium. Est perferendis ullam ab debitis similique nostrum. Labore ex nam. Ipsam dicta inventore soluta ea voluptatem. Vitae facere facere quos. Ipsum veniam corporis consequuntur. Voluptatibus aliquam molestias aspernatur. Id iure error non tempore officia atque veniam similique. Quo facere mollitia unde voluptate cum delectus. Nisi laudantium veritatis dolor esse beatae omnis cum dolores non.

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