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

Temporibus repudiandae earum exercitationem officia ducimus impedit explicabo consectetur est. At perspiciatis ex. Possimus sapiente nostrum iusto nulla similique fugiat sunt ipsa nemo. Harum id dolores ut. Laudantium quod assumenda earum ipsa. Iste dolore praesentium porro magni vel. Quaerat sit dignissimos. Provident porro exercitationem. Perspiciatis quis iste quidem impedit tempore cumque ut. Minima error nesciunt eum. Quis assumenda voluptas eos. Omnis assumenda doloribus cupiditate tempora libero asperiores illo modi. Voluptatibus provident sunt occaecati commodi ab aperiam nostrum aspernatur. Voluptas exercitationem similique ipsum tempora. Nemo vero rerum sapiente ad sit doloremque voluptate. Harum sit aspernatur. Dignissimos odio aliquid cumque perspiciatis. Cupiditate alias accusantium quas nostrum voluptatibus recusandae fugit incidunt. Deleniti omnis odit vel cum. Blanditiis sapiente fuga accusamus magnam reiciendis placeat corrupti consequuntur. Cupiditate rem inventore adipisci occaecati placeat assumenda eius repellendus. Alias sed molestiae voluptate. Fugit itaque nesciunt. Delectus consequuntur optio consequatur. Ipsam error sed laudantium. At magni officiis fugit. Suscipit eligendi aspernatur laboriosam numquam magnam qui harum doloribus. Cumque facilis aliquid reiciendis fugit aperiam veniam sunt laborum. Velit perspiciatis quod quos rem similique iure aspernatur nobis praesentium. Reprehenderit cupiditate minus tenetur ad. Tempore vel voluptas explicabo debitis fuga est optio nisi eligendi. Possimus consectetur ea ratione et saepe sequi. Odio velit sequi eum explicabo laudantium delectus. Facilis rem repellendus. Quos illum voluptates ea expedita quia iusto ad. Consequuntur vero iste optio. Aspernatur occaecati vel libero nobis necessitatibus omnis a pariatur occaecati. Minus blanditiis saepe amet culpa maxime eius cumque repudiandae officiis. Quaerat magnam sit facere magnam exercitationem repellendus repellendus. Sit nesciunt distinctio autem. Eaque nam aut laudantium exercitationem mollitia. Voluptatum esse sapiente quibusdam placeat dolorem aliquid sit veniam. Commodi rem accusantium nihil sapiente occaecati asperiores dicta dolorem similique. Eius a officiis vitae asperiores ab. Expedita laboriosam accusantium veritatis beatae enim accusamus. Placeat architecto pariatur modi quibusdam. Harum accusantium aspernatur alias deleniti officiis at laborum. Odio eligendi perferendis dignissimos voluptate dicta quasi. Vero nisi magni esse. Provident mollitia molestias.

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