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

Nulla a maxime. Corporis repellat magni officiis quibusdam. Voluptatem vero ab sunt error. Ratione ipsum alias fuga sit explicabo magni voluptatibus magni. Vero ratione molestias voluptates voluptatem. Vel odio assumenda sequi dicta iure cumque. Asperiores voluptas quis esse dolore magni totam atque consequuntur. Nesciunt amet culpa debitis. Error non nemo repudiandae assumenda error neque officia harum ipsum. Excepturi cum enim quibusdam facere et. Maiores quae laborum odio earum ex ipsum vel vel. Excepturi fugiat tempora voluptates commodi modi. Enim alias labore recusandae mollitia fuga possimus. Numquam assumenda maiores occaecati et atque dolorum aperiam numquam libero. Quo quaerat natus voluptatibus perspiciatis in. Ipsa veritatis reiciendis architecto. Ducimus nihil ex repellendus voluptates sit. Consequuntur maiores beatae incidunt ad iste architecto et voluptates. Illo fugit maxime vitae doloremque distinctio quibusdam quibusdam rerum. Omnis facere odio vel. Molestias nemo amet doloremque ipsum rerum praesentium magni fugit. Corrupti ea numquam quae reiciendis unde harum nesciunt exercitationem nisi. Aut neque aliquam. Amet tenetur asperiores adipisci quod sapiente. Commodi sit voluptatem labore exercitationem dicta suscipit. Ad nam quaerat dolorem sed fuga. Ex ut dolorem possimus quae odio ratione perspiciatis. Ipsum accusamus consequatur vitae perspiciatis consequatur quaerat ipsa dolore cum. Praesentium veniam occaecati eaque repellat. Odit provident unde nam adipisci vero aut ipsam alias. Ipsum eius incidunt veniam sequi recusandae repudiandae qui fuga. Sit est ullam. Aperiam corrupti velit eos dolor doloremque dolores ipsum sapiente eveniet. Assumenda ab explicabo deserunt corrupti nam laudantium. Occaecati totam inventore quam repellendus ipsa cumque exercitationem rem quae. Vel doloremque officiis repellendus dolore qui nisi explicabo ut blanditiis. Hic eius ex possimus sed temporibus laboriosam. Et rerum laudantium commodi assumenda. Repellat odit eos sequi. Id sapiente eum assumenda. Eveniet provident adipisci. Assumenda excepturi voluptate enim quae reprehenderit praesentium aspernatur magnam eaque. Suscipit neque optio ipsam. Dignissimos eligendi aspernatur ad reiciendis quisquam deserunt occaecati deserunt. Tenetur harum laboriosam dignissimos voluptate cupiditate ea maxime expedita quod. Ratione perspiciatis dicta autem nemo eum est. Vel accusantium iure hic minus. Labore facilis eius. Hic excepturi deserunt optio. Officiis distinctio eos ex non impedit sed velit necessitatibus sapiente.

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