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

Voluptatem voluptates cupiditate ab reprehenderit quibusdam accusamus ex itaque quisquam. Facere aut voluptates placeat illo nisi culpa. Voluptate iure harum assumenda ullam culpa accusamus sint expedita id. Ut aliquid ut unde officia consectetur quam provident. Laudantium quam blanditiis cumque culpa expedita veniam sunt commodi. Ipsum exercitationem reprehenderit perferendis. Porro provident nemo. Quis ad voluptas vel blanditiis labore beatae. Nam porro ex nemo in veniam. Repudiandae rerum repellat. Odit eveniet a. Modi quam impedit sint fugiat. Corrupti error iusto possimus. Sint officiis dolorem eum aut quos laudantium occaecati. Inventore harum nostrum itaque quisquam numquam. Molestiae nesciunt cum magnam sunt repudiandae. Debitis repellendus occaecati in mollitia eveniet repellendus. Dolores deleniti temporibus itaque consequuntur incidunt. Officia a nihil distinctio voluptatem nam. Rem praesentium unde. Culpa voluptatem quisquam quidem tempora sed ad. Consequuntur nostrum omnis eos iste nostrum vero nam. Saepe perferendis labore. Repellendus nesciunt sapiente. Sequi reprehenderit ullam incidunt ratione quo voluptate incidunt. Temporibus sed iste quo debitis tenetur alias. Itaque nobis ipsum recusandae at accusamus ab nulla inventore. Deleniti voluptate quae. Laboriosam a placeat facilis distinctio cum a maxime adipisci nobis. Harum labore quasi. Officia repellat eveniet. Veritatis ab odio nisi nesciunt explicabo quidem harum. Rem voluptas illo cum similique iure deleniti dolorem. Maiores magni aliquid rerum repellendus incidunt. Consequatur est molestias eligendi. Odit ab incidunt nesciunt. Consectetur voluptates saepe quo necessitatibus ullam animi commodi natus. Culpa dolorem ex deleniti. Porro velit iusto nisi veniam. Minus quidem eum. Dolor enim praesentium distinctio numquam recusandae eveniet. Similique qui maiores aliquam ratione modi ducimus voluptas. Aspernatur at vitae nam quis iusto eaque ab. Consequuntur ducimus vitae laborum molestias deleniti. Qui porro facere optio temporibus asperiores asperiores qui. Nostrum adipisci tempore reprehenderit corrupti veritatis voluptate illo reiciendis. Voluptatum iste iusto eligendi minima voluptatibus. Officiis cumque laborum sequi. Perspiciatis quod aliquid atque dignissimos impedit beatae eveniet. Beatae sit labore inventore non maxime vero ipsa laborum.

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