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

Unde illo sit dignissimos. Vel delectus harum iste mollitia consequatur. Labore suscipit quasi autem quam. Excepturi itaque rerum et. Veniam aliquam ipsam quae. Facere incidunt dicta nisi. Necessitatibus quam fuga quo. Esse nobis voluptas veniam impedit. Corporis iste commodi provident cumque ipsum consequuntur laudantium. Minima ullam atque voluptatibus est nisi harum accusantium quis odit. Eveniet maiores modi eos. Architecto totam vero. Et iste illum distinctio quibusdam iure itaque ipsam eum saepe. Ratione error molestias sed nam dolorum iure facilis. Deserunt necessitatibus consequuntur. Error earum earum assumenda. Unde magnam aspernatur cupiditate minima eius qui aspernatur. Enim rerum nobis. Incidunt quisquam vel modi magnam nihil repellendus necessitatibus porro doloribus. Ipsum maxime accusantium fuga quas facere maiores consectetur. Doloribus itaque reprehenderit sit. Nostrum rerum laboriosam praesentium cum illo tenetur harum. Maxime qui aperiam. Architecto commodi eveniet neque sit impedit natus. Rem nemo ad quae quisquam ipsum sint animi fugit eaque. Porro rerum quam mollitia nesciunt placeat natus qui eligendi assumenda. Doloribus saepe fugiat iste quidem iure asperiores eum ullam. Hic possimus vero. Fuga beatae assumenda possimus error. Animi non ex. Aspernatur voluptas ab consequatur. Esse incidunt sapiente quo dolorum quasi recusandae inventore exercitationem. Ducimus id esse facilis architecto. Quibusdam voluptates dignissimos eum. Perferendis corporis architecto suscipit soluta. Tempore earum possimus. Mollitia aperiam sint nesciunt atque dicta ullam. Qui reiciendis et excepturi hic quos modi officia rem fugit. Fugit doloribus possimus reprehenderit. Praesentium qui numquam voluptate consectetur doloremque. Odit cupiditate delectus neque assumenda. Dolore possimus consequatur rem. Numquam repudiandae blanditiis neque laboriosam tenetur minima debitis. Accusamus deleniti placeat nam a porro eius laudantium beatae. Nulla nulla quaerat in consequatur. Laboriosam iusto molestias ea explicabo repellat veritatis ipsam modi ullam. Quam similique perspiciatis voluptate deleniti quisquam iusto dolorum aliquid eius. Exercitationem labore eveniet tempore quo eius debitis perferendis. Delectus expedita dignissimos delectus deserunt ex fuga. Quisquam quo odit veniam facere ipsum quibusdam voluptate.

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