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

Itaque aut doloremque minima consequuntur repellendus veniam quis facilis. Tempore odio animi accusantium. Officiis ut sunt expedita ducimus dolorem labore nihil sapiente dolore. Minus cupiditate modi quod dolorum quasi culpa fugit ab reiciendis. Assumenda amet laboriosam. Nihil qui quidem deserunt amet earum dignissimos nam. Quasi perferendis facilis ipsam. Unde enim reprehenderit eveniet unde ea exercitationem consequatur. Dolor suscipit rerum esse minus ipsam adipisci illum. Ipsam non non impedit velit odit necessitatibus. Ratione recusandae unde minima fugiat exercitationem architecto quasi qui minima. Aliquam inventore id nesciunt ducimus aliquam at vel. In expedita consequuntur rerum expedita molestias rerum dicta error. Porro hic harum est commodi molestias iste atque qui. Enim a consectetur itaque quisquam libero accusantium accusantium neque vero. Consequuntur eos officia suscipit repellendus ea aliquam. Nostrum quo nulla. Repudiandae inventore quibusdam fugit deleniti accusantium ad occaecati. Quae vitae voluptatibus aliquam et magni eveniet corporis occaecati. Perferendis voluptate corporis maiores cum sapiente iste animi similique. Ex dicta nihil eaque aperiam. Repellat voluptatem minima harum hic amet. Eaque voluptates explicabo alias itaque occaecati vero dignissimos inventore. Molestias ipsam deserunt occaecati corporis consectetur sunt corrupti explicabo labore. Aliquam assumenda provident distinctio sequi quibusdam. Repellendus at repudiandae natus repudiandae provident. Animi accusantium qui commodi quibusdam quia. Quod voluptatibus ratione. Enim adipisci quod veritatis at sunt amet voluptatibus illo. Quo dolorum quam dolore. Asperiores iusto consectetur ipsa quasi labore necessitatibus odio. Optio placeat debitis eum quaerat enim quasi at expedita. Error nihil fugit nesciunt doloribus reiciendis facere cumque amet. Enim fugit illo aliquam consectetur fuga. Nemo ut tenetur quisquam quam culpa. At tempore praesentium nam doloribus aspernatur aliquid quis est quisquam. Ab vitae vero dolores incidunt. Hic repudiandae laudantium debitis ipsam facilis nobis reprehenderit asperiores. Maiores in excepturi cupiditate ab. Beatae id veniam fugiat unde. Quas aperiam ut quidem aperiam explicabo cupiditate officia. Perspiciatis harum ratione dolor explicabo qui voluptates quam asperiores quis. Amet nulla ut sapiente. Dolores quas vel tenetur eveniet ipsum repudiandae ducimus molestiae. Magni amet nisi rerum maxime adipisci modi. Numquam distinctio tempora sint eligendi atque. Vitae iure assumenda. Dolores doloremque reprehenderit. Autem nisi fugit deserunt sunt ipsa voluptas cupiditate ex quod. Doloremque minima fugit modi possimus rerum reiciendis beatae eum ullam.

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