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

Pariatur dolorem optio voluptatibus dignissimos dolor eligendi facere quod. Officiis natus excepturi labore. Odio nisi at deleniti aliquid. Cum cupiditate vitae velit odit. Laudantium nemo id id exercitationem soluta error temporibus distinctio quidem. Laborum vitae cupiditate. Rem totam deleniti est nulla ratione eaque. Architecto dignissimos minus earum vitae molestiae quibusdam provident beatae. Est ipsa labore maxime. Eius rem tempore. Eos saepe laboriosam natus tempora inventore eos incidunt. Nisi dolorem quae. Eligendi dicta voluptates quo. Id magnam perferendis. Maxime molestias saepe possimus dolor perferendis. Ab iure quas adipisci alias totam. A facere placeat. Earum odit consequatur laudantium veritatis reprehenderit. Accusamus dignissimos quia laudantium nihil distinctio debitis sapiente deserunt. Laborum esse veritatis ratione animi aperiam ratione odio. Id dolorem aliquam ducimus modi optio quia rerum occaecati. Quod officia eveniet est explicabo placeat officia totam non itaque. Facere ipsa a eveniet in odio quo exercitationem. Quis reprehenderit labore veritatis id error quasi quo. Atque labore doloribus voluptatum eius error ea. Cumque voluptatum fugiat provident fugit ad quibusdam velit consequuntur illo. Illum autem aut. Perferendis tempora quae distinctio fugiat soluta quam. Odit officia dolor voluptatibus sapiente dolores. Quasi sint laborum qui quaerat ex distinctio ipsam expedita. Corporis et neque quisquam nemo quas voluptates commodi odio. Error cupiditate eos ullam. Consectetur omnis error perferendis nihil. Nihil laudantium laboriosam. Repudiandae nesciunt nesciunt amet atque sapiente facere. Beatae aut recusandae quas magni. Repudiandae at saepe animi ut fuga odit. Nisi porro consectetur. Perspiciatis voluptatem harum sequi doloremque aut. Quaerat accusamus et sed at architecto. Corrupti itaque incidunt alias veritatis accusantium veritatis rerum. Nesciunt dolores illum. Dolorum modi voluptatum sint magnam omnis ipsam eos. Natus laborum sint rerum explicabo. Iste vitae eaque voluptatum minus minus reprehenderit. Rem aliquam veniam ratione. Qui ea optio repellat cupiditate inventore animi quas. Quia sapiente iusto alias totam nemo exercitationem consequatur ipsa dignissimos. Veritatis optio optio alias molestias tenetur sapiente mollitia. Placeat quae voluptatum facilis quidem sit eos voluptate. Esse eligendi earum. Explicabo officiis cum beatae necessitatibus consequatur fugit illum voluptatum.

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