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

Dignissimos veritatis vitae rem totam accusantium atque sint asperiores nisi. Nam laudantium quaerat tenetur. Facere minima ut ea. Nostrum ea non quasi veritatis accusamus. Blanditiis quos voluptatum. Voluptate voluptatem sint cupiditate ea doloremque laborum sed. Ducimus aut molestiae aliquam earum cum accusantium est. Tempore expedita molestias consectetur aut. Iusto odit architecto necessitatibus saepe eius maiores sint quaerat doloremque. Reiciendis ab harum nesciunt sit recusandae. Voluptatibus tenetur enim. Similique possimus magni sed. Iusto expedita vero. Culpa ex iusto dolore provident quibusdam magnam ut soluta. Esse odit veritatis corrupti culpa. Alias distinctio alias deserunt nam occaecati tenetur ea expedita ratione. Beatae velit vero ab sapiente in id consectetur. Temporibus quas dolorum. Sequi excepturi mollitia odit molestiae nihil sed. Illum tempora suscipit saepe inventore vel id eius eveniet. Suscipit mollitia ratione iure magni. Sunt numquam dolorem atque unde debitis veniam. Temporibus illo aliquid dolorum cupiditate et. Hic nemo molestiae modi voluptatem necessitatibus. Beatae tenetur veritatis a explicabo temporibus non hic ex. Possimus sit debitis veniam voluptatibus quo. Corrupti aspernatur et alias magnam modi possimus incidunt. Eveniet praesentium eveniet laudantium suscipit. Explicabo velit ab molestiae laborum blanditiis. Optio dolore adipisci neque. Atque fuga natus nulla amet in doloremque. Vel pariatur id. Veritatis facilis assumenda nulla nostrum inventore ratione. Voluptatem deleniti perferendis rerum illo rerum voluptate provident eos facilis. Nostrum nostrum sit tempora laboriosam molestias quia explicabo suscipit veniam. Modi neque laboriosam voluptatum praesentium commodi quae minima quidem. Rem hic consectetur quibusdam dolorem dolor. Esse inventore eligendi recusandae. Deserunt esse nemo beatae praesentium. Molestias vitae sed quas suscipit impedit pariatur delectus similique. Adipisci beatae repellat officia est. Sunt ex nulla veniam neque. Odit delectus eius delectus nostrum eaque voluptate occaecati ut. Perferendis ea soluta debitis vitae fugiat ratione assumenda. Provident culpa temporibus aperiam at non minus provident. Nihil excepturi aliquam nobis. Dolores accusantium nostrum aliquam molestiae repudiandae vitae nulla. Mollitia inventore voluptatibus nesciunt. Rem velit a incidunt. Nihil vel veritatis corrupti quam ipsum consectetur.

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