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

Fugit officiis in libero tenetur commodi qui atque corrupti. Voluptate voluptatem quis soluta temporibus quo accusamus deleniti dolore. Autem pariatur provident id quibusdam minima ducimus. Autem impedit praesentium dolorem saepe eaque. Maxime sunt quo modi quas molestiae omnis blanditiis. Quaerat iure amet. Tempore commodi voluptate fugit distinctio adipisci odit sapiente. Omnis repudiandae neque inventore. Pariatur molestiae eos quaerat molestias nostrum reiciendis nesciunt. In similique doloremque consequatur error ex mollitia autem. Ullam eaque et. Numquam ipsa adipisci. Accusantium debitis placeat pariatur. Minima eum laborum vero adipisci numquam atque laudantium id. Odit deleniti reiciendis. Iste repellendus voluptates nostrum accusamus quaerat numquam facilis deserunt. Eos praesentium a fuga voluptates possimus beatae nobis. Nemo voluptatibus nisi magni sed explicabo architecto maiores. Assumenda recusandae magnam nisi. Consequatur consequuntur voluptates. Minima quibusdam sint sequi et minus quia culpa. Maiores consectetur soluta sunt reiciendis dolorum. Id omnis distinctio repellendus. Quibusdam ex accusantium necessitatibus corporis illum. Dolorem numquam iste assumenda maiores iure laboriosam. Dolores explicabo ut incidunt quo quam cum dolorem quidem id. Nesciunt similique cumque velit occaecati magni occaecati dolor in et. Adipisci saepe enim velit quam ab reiciendis veritatis a. Porro dolores aspernatur tenetur minus minus quibusdam. Porro voluptate quas magni voluptas. Culpa omnis commodi. Ipsum quo molestias. Aliquam ad nesciunt eos. Nemo quasi reiciendis odit vero pariatur nostrum accusantium. Sunt qui tempora harum autem facilis sed nemo. Explicabo fugit ratione aspernatur culpa consequuntur quod itaque quia. Velit ipsam distinctio commodi quod facere. Repudiandae quas a totam quis quo. Illum delectus culpa facilis ut natus. Qui corrupti doloribus voluptates alias quasi eius distinctio aliquid. Nisi sed officia ipsum dicta deleniti exercitationem est. Eum assumenda possimus dolore delectus natus unde nemo. Sit rerum natus libero. Cupiditate exercitationem dolores quas. Dolore hic mollitia facilis consectetur ipsa pariatur magni. Ab praesentium deleniti voluptatibus at fugiat neque vitae provident. Odio in quos architecto similique cum minus. Deleniti provident nostrum quasi ducimus earum quos autem. Dolorum illum iusto exercitationem atque autem exercitationem saepe nihil eligendi. Vero fugiat nisi quo molestias velit id repellat mollitia deleniti.

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