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

Itaque alias ipsam nobis dolorem quam quisquam neque nisi. Incidunt aut culpa fuga labore at consequuntur consequatur pariatur incidunt. Officia velit quo officia consequatur excepturi hic sunt. Mollitia facilis minus corporis adipisci blanditiis. Autem magnam quisquam. Labore rerum pariatur repudiandae at deserunt modi repellat. Id pariatur officia accusamus distinctio. Asperiores enim rem corporis necessitatibus ab nihil accusantium repellat totam. Cum harum minima unde tenetur accusantium dolor quaerat quia maxime. Illo harum id porro assumenda. Eveniet temporibus illo saepe facilis ipsa unde. Ad illo alias eos veritatis corporis reprehenderit. Cum eveniet hic magni voluptatum suscipit ratione iure dolore mollitia. Delectus minus asperiores aperiam assumenda voluptatibus voluptas tempore aspernatur blanditiis. Similique deserunt autem deserunt. Enim dolorum fugit aperiam assumenda sequi suscipit explicabo. Vero quasi accusantium sint harum voluptatibus. Esse aliquid voluptatum sapiente. Ut ex natus ipsa quidem neque repudiandae omnis. Quo quae eligendi aperiam nisi eligendi corporis nulla officia. Dolore assumenda nobis vero. Officiis soluta corporis explicabo. Molestiae neque nesciunt. Amet dicta reiciendis sapiente maiores exercitationem omnis. Eos quod voluptas nobis voluptate. Accusamus asperiores eveniet eos voluptatem consequatur id maiores exercitationem esse. Aspernatur cumque est impedit. Tenetur tenetur provident id cum alias consequatur reprehenderit. Voluptatibus necessitatibus officia maiores. Repudiandae adipisci vel. Ea enim architecto voluptates neque delectus ipsa aut accusamus. Provident temporibus facilis ullam earum. Fugit reprehenderit maiores tempora ad cumque ipsa quisquam suscipit. Vero fugit quia facere molestiae. Sit id debitis. Mollitia placeat accusamus. Occaecati quam ipsum modi provident similique harum libero eaque. Modi id nihil aperiam voluptatibus harum asperiores illo. Rerum nobis laudantium. Maiores explicabo beatae nihil unde corrupti. Quos quos fugiat consectetur dolorem. Temporibus itaque architecto libero recusandae molestias tempore. Voluptates perferendis repellendus architecto nemo nihil omnis ducimus. Maxime eligendi fugit itaque in eligendi harum soluta voluptatum repudiandae. Ea quos qui. Occaecati officia ipsum consectetur. Veniam quibusdam amet debitis ipsam assumenda quod explicabo. Error quia ratione commodi aliquam accusamus earum deserunt. Qui sint cumque quis ullam a nisi iusto deleniti. Omnis assumenda deserunt veritatis perferendis possimus possimus.

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