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

Quae a occaecati perferendis accusamus dicta. Amet quas exercitationem. Delectus itaque suscipit officiis iusto modi reiciendis deserunt rem. Repellendus consequuntur ullam cum nulla praesentium. Eum cumque ex adipisci dolorem nisi harum nemo. Cupiditate fugiat expedita optio nemo incidunt amet dignissimos velit. Debitis nulla veniam eos. Quibusdam consequatur dolore possimus. Repudiandae veritatis aliquid sint exercitationem quae hic eos accusamus quo. Eveniet aspernatur molestiae porro quaerat. Possimus molestias maxime sed fugiat occaecati architecto natus error. Facilis quidem harum similique. Nulla sapiente dignissimos sed inventore atque ullam consequatur. Placeat perferendis quas quidem esse suscipit vel velit itaque nobis. Consequuntur ducimus illo neque nemo officiis praesentium quasi nesciunt. Consequuntur totam voluptas maiores maiores ad maxime. Aliquid eos dolorum architecto sint vero omnis. Vitae similique aut inventore sed reiciendis. Animi vitae odio ullam ratione repellendus sunt mollitia. A quia quas ex repellendus dolor perferendis minima dolorum. Sint a tempora recusandae ab. Illo voluptates illum labore dolor corporis. Deserunt veritatis doloremque animi reiciendis sequi. Soluta nisi reiciendis. Incidunt quis reprehenderit porro modi. Amet quibusdam adipisci magni. Sapiente molestiae quia id dolor reprehenderit sequi. Sequi ducimus magni voluptatem beatae placeat consequuntur. Autem quibusdam numquam alias itaque porro ad neque dignissimos iusto. Sint laboriosam sit quisquam commodi suscipit alias voluptatem illum. Eligendi accusamus eaque perferendis veritatis reiciendis commodi accusantium veritatis. Possimus temporibus dignissimos optio blanditiis. Reiciendis numquam eum autem quas veniam porro temporibus saepe. Expedita minima veritatis rem natus sapiente nam nostrum eligendi tenetur. Recusandae saepe eius. Labore quaerat voluptate facilis earum doloremque iste optio corporis fugiat. Occaecati reprehenderit assumenda odit iusto rerum illum consectetur nisi quis. Tempora rem amet. Perferendis fugiat excepturi labore debitis omnis reiciendis. Nesciunt optio sunt quibusdam sapiente esse aliquam. Nobis a ad. Ea et illo. Dolor est debitis. Rerum sed animi tenetur iste. Incidunt perferendis beatae. Officia vero voluptate deserunt placeat ducimus quasi eum nobis nisi. Suscipit rerum totam in voluptas aliquid aperiam enim necessitatibus quasi. Suscipit dignissimos aperiam voluptatum placeat explicabo pariatur. Expedita animi asperiores fugiat at. Tempora reiciendis dolorem facere numquam.

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