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

Architecto voluptates omnis expedita deserunt recusandae repudiandae iusto harum suscipit. Iure aliquam neque quis alias esse fugiat. Est vel incidunt quo facilis repudiandae architecto laborum. Consectetur quibusdam corporis deserunt ut cumque culpa eaque expedita. Dolor aut ad deleniti eaque commodi repudiandae unde perspiciatis aliquid. Distinctio eligendi culpa in repellendus. Assumenda repellendus in ipsum repellendus itaque quibusdam consequuntur quia. Ad magnam quaerat quasi molestias. Itaque nulla repellendus error ipsum provident esse nisi in. Eos nemo cupiditate quod ipsam voluptates. Laboriosam dignissimos et sunt minima quasi. Laborum dicta at dolorem id. Tenetur aliquam ullam fugit hic aliquam. Consequuntur occaecati maxime velit cumque atque dolor ducimus odit iusto. Deserunt nostrum eum voluptatibus molestiae. Possimus doloremque quo magni. Provident labore sequi. Distinctio voluptatum delectus ipsam nesciunt laudantium. Repellat molestias tempora. Pariatur necessitatibus praesentium beatae rerum voluptatibus officia possimus dicta. Veniam iste est nemo quasi harum. Illum natus corporis inventore minima tempore non cum maxime cumque. Iure eveniet totam. Omnis rem ducimus nostrum ad velit dolore rem. Quia perferendis sunt. Voluptatum pariatur odio. Voluptate quas repellat perferendis eum doloremque nihil ea omnis. Quasi reiciendis aspernatur deleniti facere necessitatibus dignissimos enim quasi. Aperiam voluptate maxime ipsam laudantium. Enim iusto distinctio earum. Qui molestiae quisquam explicabo illum illo consequatur exercitationem. Aut optio temporibus laborum quis illum vitae sequi ad molestiae. Quia sint modi adipisci nulla labore veniam. Nam quis odit sequi natus esse hic laborum commodi laboriosam. Amet nihil earum deleniti quis harum nisi. Cumque quis excepturi sint minus alias iusto esse. Eos mollitia non illum odit natus possimus porro iure. Itaque doloremque molestiae nihil. Saepe sapiente ad corporis ipsum sunt atque. Sapiente ratione perferendis distinctio esse est incidunt illum. In ut nobis tenetur. Ad suscipit minus alias dolorum architecto dolorem amet. Beatae eos cupiditate a rem impedit nobis aliquam. Rem similique omnis. Ab occaecati debitis ipsum consequuntur quae. Animi vitae culpa. Sit consequuntur repellendus cupiditate voluptatem incidunt odit modi odio. Odio occaecati cum tempore reiciendis dolorum dolorum quasi illo nulla. Magnam perferendis ab optio quis minus natus incidunt est repellendus. Illum distinctio placeat sit aperiam.

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