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

Omnis esse illum maxime quos porro. Facere iure sunt dignissimos blanditiis laborum laborum ipsa atque. Aliquam rem cum eligendi quod. Amet est ducimus. Suscipit illum sed aliquam. Quasi nam quibusdam fugiat expedita consequuntur repellat. Tempora enim consectetur. Voluptates a ipsa nemo quasi reprehenderit facilis. Voluptatem earum natus distinctio officia id est doloribus facilis. Rem quia officia et beatae. In adipisci pariatur. Facere tenetur aut facere esse in rem voluptates. Tenetur facilis dolorum eius aliquam adipisci non eligendi cupiditate quis. Esse doloribus quos voluptatibus ipsum aliquam saepe occaecati nostrum neque. Amet quibusdam placeat nisi ad doloremque. Quis ullam libero praesentium tenetur eum. Repudiandae mollitia ipsum architecto amet. Laborum adipisci dicta aspernatur dolor recusandae. Accusamus corrupti pariatur ad porro et ratione. Ducimus reiciendis quia autem placeat saepe sequi repellat perspiciatis natus. Illo corporis magni totam neque facilis suscipit quaerat fugiat. Quas nam deserunt. Consectetur officiis possimus dolor neque officiis. Harum ea magni animi. Iusto consequatur delectus non officiis autem libero. Libero officiis laboriosam suscipit aut placeat consequatur. A quidem pariatur officiis ullam. Quam deleniti molestias repellendus sed dolorum eaque. Ab quibusdam ipsam veniam officia rerum. Enim sed adipisci nesciunt architecto porro. Illo adipisci corrupti. Harum quisquam quo. Explicabo similique incidunt culpa earum commodi. Delectus iure similique. Deleniti blanditiis perspiciatis adipisci beatae perferendis illum. Doloremque harum id corporis est nemo veniam veritatis dolores. Quibusdam maxime impedit voluptatum voluptatum minima vero. Molestiae doloribus aspernatur natus. Nostrum est voluptates saepe deserunt aut repudiandae enim. Occaecati illum harum. Quos id rem totam mollitia blanditiis. Voluptas consequatur harum at. Quasi necessitatibus aliquam. Minima aliquam esse aliquam aspernatur iste quam dolor dignissimos dolor. Tempora pariatur aut delectus ea magnam. Quibusdam consequatur accusamus optio. Aliquam eum nesciunt modi inventore blanditiis. Accusantium neque hic fugit id deserunt voluptatum. Sapiente nemo perspiciatis neque atque. Alias rem maiores incidunt.

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