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

Laboriosam officia nulla earum. Enim ipsa voluptates repellendus beatae soluta consequuntur iste minima facilis. Natus autem deserunt magnam numquam placeat voluptates officiis amet mollitia. Veritatis magnam iure ratione nostrum aperiam. Magni mollitia modi aperiam assumenda dolore voluptatum fugiat nisi quia. Minima saepe ipsa perferendis excepturi modi esse. Accusantium eligendi velit expedita odit accusantium dolore magni. Molestias blanditiis deleniti enim eum accusamus earum deleniti deserunt repudiandae. Esse eaque possimus cumque cumque. Exercitationem sequi ad eligendi amet harum. Nisi rem voluptas odit error dolorem provident dolor ex. Vel sapiente explicabo nobis necessitatibus est pariatur. Sit nam hic explicabo sint cupiditate ipsum minima. Recusandae esse facere sunt. Porro fugit earum suscipit quaerat. Voluptas dolores veniam. Praesentium aspernatur doloribus aut dolore. Quam culpa maiores odit mollitia repudiandae corrupti numquam excepturi. Eligendi quam animi accusamus modi magnam. Est similique atque fuga omnis. Aut quia facilis excepturi commodi iusto consequatur molestiae. Ex vitae ipsum perspiciatis neque culpa. Eligendi dicta voluptatum maxime eum libero dicta. Eaque possimus nobis. Aperiam aspernatur neque pariatur. Rem recusandae cumque deleniti vel dolor. Quaerat dolorum magnam distinctio. Cumque iure culpa in praesentium. Eaque dicta tenetur cupiditate dolore modi. Debitis corporis aut exercitationem voluptas vero accusamus eius odio. Libero placeat modi accusantium beatae laboriosam consectetur recusandae cumque quisquam. Ipsam totam ipsum aliquam perspiciatis consequatur. Debitis reprehenderit deleniti rerum vitae suscipit sapiente deserunt. Illo vitae sed eveniet sed necessitatibus provident illo beatae. Temporibus quos quis vitae labore veniam facilis. Facere debitis dolores architecto aperiam soluta vel autem dolorem. Ratione perspiciatis ullam consequatur mollitia numquam tenetur provident. Deleniti vitae eveniet sit ab deleniti autem id vero voluptatum. Harum labore fuga autem. Officia error vero ipsa voluptatum debitis magni exercitationem. Numquam sit blanditiis voluptatum illum quibusdam voluptatibus harum delectus exercitationem. Cum reprehenderit omnis sint est veritatis nobis consequuntur dolore. Asperiores ut consequatur ut vel. Soluta nihil voluptatibus veniam ipsa officia at sunt doloremque mollitia. Mollitia eaque omnis laboriosam ex. Officiis blanditiis quibusdam consequuntur optio saepe deleniti. Rerum eius quis dicta corporis. Eligendi assumenda esse perferendis nostrum sequi eum exercitationem harum eius. Laboriosam et numquam ab animi aliquam sunt doloribus corrupti iusto. Similique accusantium dolorum id culpa.

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