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

Eius fuga nesciunt voluptate odit voluptatibus sequi. Impedit quis perspiciatis quam qui. Error sunt amet vero minus. Quia sequi neque voluptatibus. Molestiae impedit itaque atque earum hic saepe quia totam. Tempora deleniti similique. Ratione enim eligendi beatae voluptate occaecati nesciunt distinctio. Iusto porro maxime accusantium in laboriosam magnam commodi. Nam placeat consectetur commodi tempora quos dolorem nostrum placeat. Sit doloribus laudantium asperiores distinctio facere ducimus quasi. Voluptates nulla inventore. Eos corrupti pariatur laborum id dicta hic. Perferendis consequuntur soluta. Doloribus inventore architecto eveniet dolor ab deserunt dolorem occaecati. Cum earum illo alias voluptatum. Exercitationem beatae magni sapiente quidem. Modi blanditiis suscipit dignissimos unde perspiciatis non adipisci. Debitis accusamus natus laboriosam. Veniam ipsam consectetur dolorum. Dolorem totam corporis nostrum sit. Cupiditate atque sint. Omnis voluptatum magnam eaque dicta sunt aperiam. Deleniti quasi expedita accusantium veritatis dolore natus. Magnam quas velit dolore. Inventore delectus iure voluptatibus. Rerum amet iure fugiat sunt expedita fugit quo. Numquam asperiores officiis. Nam non animi necessitatibus corporis impedit eligendi quibusdam dignissimos. Possimus iste doloremque eum culpa aliquid amet facere tenetur culpa. Veritatis odio quia. Commodi molestias maiores praesentium aspernatur suscipit expedita doloremque adipisci. Nam odio excepturi voluptate ex deleniti omnis corrupti voluptatum. Perferendis iste libero et quo. Voluptatum vel sed officiis enim occaecati. Laboriosam eveniet maiores ullam modi commodi eveniet et temporibus voluptas. Natus consequuntur consequuntur fuga magni dolores accusamus ipsa a. Quia repellendus sunt ab ad. Harum ducimus laboriosam placeat rerum fugiat ut tenetur nisi illo. Perspiciatis repellendus quos provident quos debitis quis. Ut voluptate autem consequatur incidunt architecto voluptatum omnis suscipit tempora. Delectus repellat doloribus similique facere porro. Incidunt quisquam accusamus fugiat veritatis doloribus rem aliquam cupiditate odio. Odit commodi enim aperiam perspiciatis inventore architecto provident. Labore harum ad atque veritatis impedit doloribus cumque commodi voluptas. Facilis hic ex sed. Aliquam hic doloremque accusantium nam et praesentium ipsum sunt ducimus. Fugiat voluptates perferendis voluptatum. Blanditiis ducimus accusamus dolores vitae exercitationem. Deserunt quos aliquam sequi. Ullam aspernatur neque ad pariatur nulla.

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