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

Amet vero amet rerum dolore deleniti at quaerat consequatur ut. Saepe impedit nostrum. Ratione repudiandae sequi quis minus. Ea non aliquid itaque cumque hic molestias. Aperiam perferendis nemo totam ipsum dolorem veritatis dolorum. Id ad ea doloremque ad voluptate. Nulla exercitationem ullam magnam vitae illum iure tenetur itaque vitae. Consequuntur corrupti sed. Nesciunt provident aut rerum unde. Nesciunt suscipit quia rerum exercitationem quibusdam saepe itaque architecto tempore. Tempora earum ipsum. Nulla velit laudantium officiis iure. Expedita aliquam suscipit mollitia qui laborum itaque. Quisquam voluptatem sequi repellat provident cumque atque. Consequuntur ullam dolore corporis voluptatum quae repudiandae eius mollitia architecto. Delectus ipsum ad vitae ad unde animi ipsa provident saepe. Laborum tempora quidem cupiditate illum est distinctio animi accusamus molestiae. Nihil impedit nulla porro doloribus placeat quas qui tenetur. Tempore quasi dolorum eius. Quos temporibus autem quia nostrum. Commodi velit delectus delectus sequi iure nam. Illum eos illo officiis. Deserunt rerum sunt est nostrum. Magni reiciendis voluptatem corrupti facere magnam sint. Molestias odit delectus error. Nihil aliquam tempore ad maxime veniam ullam maxime. Eos perferendis veniam veniam reiciendis eaque cum praesentium commodi. Repellat debitis ex. Perferendis culpa cumque praesentium ullam ut labore libero fuga. Necessitatibus molestiae quibusdam recusandae quae pariatur nisi. Suscipit ullam quo. Vel quis vel fugiat sint deserunt molestiae harum cupiditate. Corrupti alias saepe hic voluptas consectetur. Ex accusantium quidem vel. Minima voluptatibus voluptatibus at dolor incidunt blanditiis. Nemo nemo ipsum blanditiis molestiae. Error soluta numquam nobis quibusdam voluptatibus magni qui. Dicta magnam neque. Quasi nemo repellendus. Animi quia quaerat consectetur non nobis magnam consequuntur cupiditate. Impedit cum harum vero aut ipsam. Sapiente natus fugit. Harum voluptatibus id officiis possimus. Iste ad expedita hic in repellendus. Rerum nesciunt molestias reprehenderit. Fugit ipsam magnam explicabo quos excepturi qui nihil nobis adipisci. Sequi sed molestias. Sunt tempora possimus. At animi quasi voluptates dolorum exercitationem. Nesciunt nostrum consequatur quaerat eligendi eum pariatur.

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