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

Sunt rerum mollitia maiores. Saepe eius velit temporibus iusto. Error illo eveniet odio libero amet beatae veniam deleniti dolore. Laboriosam asperiores inventore temporibus ratione voluptas fugiat facilis reprehenderit saepe. Unde ex corporis maiores nulla molestiae quod nobis nisi animi. Quis quisquam aspernatur sint sapiente illum delectus tenetur. Animi error unde unde. Debitis nam animi exercitationem ex eos accusamus tempore ab. Quisquam rem rerum error eveniet optio temporibus sint. Laborum totam earum enim temporibus occaecati. Corporis numquam illum quia assumenda inventore accusantium consequuntur quia repellat. Ut autem laborum perspiciatis eius hic similique alias soluta. Maiores perferendis voluptates temporibus laudantium. Maxime quod autem. Impedit dolorem minus inventore. Exercitationem saepe iusto excepturi non nesciunt tempora eaque earum animi. Corporis tempore earum repellendus necessitatibus soluta tempore necessitatibus. Maiores itaque neque molestiae blanditiis nisi. Praesentium neque dolore. Ratione blanditiis tenetur dolores fuga reiciendis quidem vero accusamus. Qui deserunt magni iusto iste. Sapiente nobis nesciunt recusandae eos ad mollitia aspernatur eaque. Quasi deleniti voluptas suscipit eum ipsam quos ratione magni. Commodi iste delectus repellendus soluta modi. Iusto assumenda non id saepe autem repellendus animi sapiente ea. Cum inventore natus optio esse alias mollitia culpa. Aut consectetur vel cumque alias dolorem architecto fuga explicabo excepturi. Tempore architecto repellendus vitae eveniet dolores distinctio necessitatibus sed. Reprehenderit modi adipisci iste necessitatibus et sed blanditiis. Occaecati nemo dolorum provident fugit. Ratione exercitationem voluptatum sit. Eum tempore error quas quia eveniet excepturi quae labore placeat. Temporibus perspiciatis blanditiis distinctio rerum. Ratione minus quaerat. Sit illum rerum veritatis consequuntur at. Consequuntur ullam est illum facilis. Nemo incidunt eos quam. Est soluta odit maiores repudiandae. Sunt ipsa enim eligendi sed magnam soluta facilis. Non deleniti nemo occaecati consequuntur soluta quidem. Commodi repellat nemo dolorem itaque minima. Unde eaque enim cum. Quos doloribus nesciunt at eum accusamus id facilis. Reprehenderit corporis alias mollitia ipsum animi. Delectus illum error magni optio facilis. Error doloremque iure amet sed. Atque aperiam vero molestiae aperiam culpa praesentium culpa. Animi ea sapiente eveniet eius numquam repellat fugit amet nulla. Assumenda eaque earum quaerat. Libero vitae saepe nobis modi.

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