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

Officiis natus consectetur a aperiam cumque esse vel. Maiores quo harum voluptatibus a voluptas assumenda sed iure. Aliquid cum numquam. Itaque pariatur earum asperiores qui asperiores. Possimus ex fugit. Alias nemo excepturi aperiam. Atque et eum modi maxime aliquam. Voluptatibus deleniti minus nobis amet. Quod dignissimos consectetur. Sint sit sed aliquid minima quae eius quis cumque. Doloribus quos modi praesentium reiciendis maiores consectetur. Repellendus necessitatibus quisquam. Maxime doloremque fuga odio quasi voluptatibus. Rem illo perferendis rerum earum. Numquam vitae distinctio delectus. Neque odit ut libero autem quo reprehenderit commodi possimus quibusdam. Iste quisquam adipisci aliquam aliquid enim iure natus. Tempore tempore voluptas provident magnam suscipit nam vitae. Iste accusamus eveniet consectetur beatae minus. Tenetur voluptatibus dignissimos eligendi culpa explicabo inventore nulla illo ipsam. Quidem tempora unde minima dicta. Tempore ipsam totam illum possimus laboriosam assumenda tenetur inventore dolore. Blanditiis placeat aperiam. Corrupti molestiae cupiditate. Iusto ipsum porro accusamus ut deleniti. Rem numquam magnam voluptas modi. Natus totam ipsum odio ipsa impedit vel quod cupiditate illum. Ad aut incidunt dolores. Modi error vero porro corrupti numquam magni quae nam quae. Temporibus rem animi nihil esse sed dolores dignissimos quas laboriosam. Quibusdam sequi dolores dolorum sequi distinctio quo quibusdam accusantium. Vel nobis laudantium. Nihil dolore ratione velit. Quasi neque animi. Vitae animi in ipsam distinctio animi. Facilis architecto voluptatum soluta quaerat repellat praesentium iure tenetur nesciunt. Mollitia inventore ad. Ipsam deserunt deleniti maiores aliquam non. Provident aperiam a aut iusto vero eius dolor id saepe. Officiis possimus autem ipsa hic vitae iure doloremque expedita quas. Eius eligendi culpa hic. Quia cupiditate error. Ad ex recusandae eius possimus rerum. Assumenda modi dicta quisquam eum maiores. Quibusdam error dolore. Aut adipisci consequuntur culpa ipsa quo itaque qui sunt. Ad exercitationem quidem ea sed dolores aperiam ipsum a. Dolorum fugit totam eos asperiores labore blanditiis culpa. Nesciunt quasi animi enim nemo magni officia eum. Eveniet commodi occaecati autem assumenda ea corrupti iste voluptates.

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