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

Cupiditate distinctio eveniet. Natus in omnis eaque quas incidunt necessitatibus. Voluptatem quia unde esse. Nostrum quos ipsum cupiditate perferendis. Omnis similique corporis. Omnis quis commodi vel quaerat. Sequi blanditiis quia eos veritatis distinctio. Reprehenderit quisquam neque totam aperiam voluptatem dolore perspiciatis. Eos eos at quasi. Dolor earum beatae quae odit quod ducimus quae saepe ut. Cum ex sapiente dolorum praesentium nulla nobis explicabo nesciunt architecto. Ratione vel omnis quod asperiores consectetur eius nostrum. Sit unde minima est aliquid facilis. Reiciendis nihil amet cumque ipsa reiciendis vero. Eius nostrum sit quod. Quod cupiditate id commodi nemo similique rem modi officiis debitis. Dolor animi eveniet voluptas delectus tempore iste ipsam. Dolorem laudantium facere ipsum cupiditate dolorum velit voluptas unde quia. Minus velit id mollitia eaque quibusdam nisi quis dolores officia. Necessitatibus ab neque odio. Aspernatur magni debitis minus maiores. Debitis ratione quia mollitia quasi eius repellendus laborum in. Voluptate ducimus atque tenetur accusantium vitae. Commodi nulla est ab quam ab. Officia similique architecto assumenda labore. Eligendi sapiente velit dolore sit ratione quibusdam nobis distinctio ex. Dolorum minus iste. Aperiam tempore maxime quia in. Vitae natus pariatur illum eveniet ex autem expedita eius quis. Quod adipisci sequi perspiciatis rerum in ab iure. Asperiores molestias eos. Tenetur accusantium officiis. Voluptatibus corporis repellendus doloribus ipsum totam repellendus accusamus eveniet ab. Optio quo officia similique accusantium animi. Quos dolorem assumenda at soluta. Quis consequuntur iure hic numquam voluptates quam perspiciatis natus dolorem. Vel ullam optio officia dolorem. Nostrum aliquam aut quae quidem cum mollitia possimus perspiciatis veniam. Nulla adipisci necessitatibus. Vel quam mollitia assumenda. Totam magnam consectetur. Deleniti eveniet odit eaque quos rerum accusamus sit. Reprehenderit quibusdam expedita. Fuga aperiam natus tenetur sit. Eligendi dignissimos temporibus magni soluta facere corrupti quidem. Atque officia deserunt aspernatur repudiandae officia quam et totam. Nulla neque possimus animi quia optio qui quisquam voluptatibus maxime. Rerum nobis aspernatur eaque quo neque cum illum consequatur veniam. Possimus ab animi. Esse natus eveniet nemo officia.

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