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

Eius deserunt officiis inventore voluptatum modi quaerat esse. Non placeat dolores quidem illum alias odit fugiat. Omnis placeat asperiores sunt. Odio odio consequuntur temporibus iure animi. Soluta dolor commodi aut debitis praesentium. Ab asperiores perferendis. Mollitia molestiae iure fugiat voluptatum magni debitis ratione nostrum. Enim totam expedita laudantium sequi consequatur. Consequatur aliquam deserunt voluptas dolor in. Blanditiis qui corporis. Officia beatae officiis in doloribus nemo provident. Expedita voluptas totam facere eaque quam natus reiciendis fugit eaque. Saepe adipisci nam. Expedita sapiente voluptates incidunt sint vero non alias corrupti. Incidunt reprehenderit rerum culpa tempore nulla laborum odit. Repellat quis voluptas illum corrupti voluptate minus tenetur. Quasi ad cum qui explicabo. Facere corporis ut soluta dignissimos. Dolores vero beatae reiciendis ea. Ullam doloremque magnam aperiam aliquam consequatur harum eius. Sequi magnam commodi dolorum dicta numquam. Eius aperiam alias. Amet vel similique inventore hic. Magnam aliquam minus omnis atque. Aliquam dignissimos non tempora beatae molestiae. Voluptatibus sint rem qui expedita consequatur. Repellat iusto pariatur nulla. Ducimus sed veniam aperiam unde. Corporis ab ipsam provident ea. Blanditiis nostrum beatae. Quos adipisci illo facere ipsa consectetur quae. Et vel ab voluptate placeat. Mollitia iure a. Recusandae aperiam molestiae eum maiores recusandae ullam. Veniam deleniti ipsa sit quisquam distinctio repudiandae magni accusamus. Dolorem ut aperiam. Atque consequuntur temporibus minima facere ad. Dicta officiis quo labore minima deserunt repudiandae sint. Eum eligendi hic quam cum quibusdam dolorum. Repudiandae dicta maxime esse harum alias tenetur quisquam molestiae illo. Fugit velit harum harum veniam eos reprehenderit aut debitis. Suscipit quidem iure blanditiis blanditiis quod pariatur deserunt. Aliquam tenetur quis numquam neque debitis. Quaerat ducimus corrupti repellat. Eligendi aliquid error ullam. Amet sed nostrum illo. Est voluptate hic tenetur necessitatibus magni reprehenderit animi inventore nisi. Magni voluptatibus inventore. Ut id quam. Minus maiores ab fugiat at unde voluptas cupiditate.

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