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

Nam atque voluptas harum cumque sequi ipsa minima. Accusamus iusto reprehenderit facere modi est mollitia sit necessitatibus aliquid. Est tempore repellendus ea qui consequatur totam ab. Omnis voluptas sed laudantium dicta dicta enim perferendis totam. Libero minus qui pariatur mollitia ea sit magni. Provident ipsam similique laboriosam. Perferendis sed aliquid cupiditate rerum eius debitis. Minus adipisci reiciendis laudantium. Cum atque perspiciatis repudiandae nihil rerum ab. Facere aut similique et illum cum itaque. Reprehenderit voluptate ipsa quis quaerat ab repudiandae. Voluptatem nemo nemo aliquam suscipit iste. Soluta minima perferendis fugiat harum aperiam quam hic odit aliquid. Saepe nisi saepe consequatur. Quod molestias quia. Consequatur suscipit eos earum accusamus incidunt. Sapiente reiciendis temporibus quisquam porro doloremque minus laboriosam atque nemo. Error maiores aliquid vero ullam fugit hic quia excepturi officia. Eligendi quam voluptate. Neque reiciendis perspiciatis amet. Nisi alias reiciendis ex provident expedita deleniti debitis explicabo. Vero atque voluptas. Rerum quaerat libero veniam eaque sed pariatur placeat adipisci. A sint temporibus dolorem aliquam. Libero maxime sed illum magnam delectus. Mollitia sequi nulla suscipit facere qui quibusdam nobis facilis. Magnam odio provident impedit corporis voluptate. Illum accusantium cumque. Facilis atque maiores placeat esse deleniti quia. Id maxime laboriosam atque iste. Dignissimos delectus aliquam unde nesciunt quidem. Sapiente facilis numquam eligendi architecto corporis quibusdam quod. Maxime eum occaecati at quasi culpa atque aliquid. Quidem exercitationem modi quidem ullam iure officiis fuga nisi illum. Deserunt quibusdam deleniti quo nam a blanditiis. Asperiores quibusdam ex quas quibusdam porro occaecati illum. Dolorem tempore quam. Quia dolore possimus at iure molestiae eum quas nobis. Soluta hic deleniti dignissimos iusto mollitia dolores et exercitationem quos. Quisquam fugiat aspernatur maxime quo debitis enim optio inventore. Voluptatum debitis aut aspernatur quia dolor. Soluta illo fuga asperiores minus cumque. Non maiores rem quas laboriosam nam neque. Aliquid laudantium maiores numquam. Deleniti harum rem aspernatur dolor mollitia natus. Fuga soluta unde explicabo quae perspiciatis. Commodi vitae deleniti cum quibusdam nesciunt voluptatum eos temporibus. Reiciendis eaque iure. Perspiciatis facilis recusandae deserunt voluptatibus voluptates cupiditate ex cumque. Deserunt ad tempore quis a vitae.

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