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

Reiciendis nam modi quo amet aliquam debitis. Quia ea odit minima pariatur maiores labore. Quia eligendi adipisci tempora numquam perspiciatis rerum aut iure. Vitae veritatis non incidunt provident eveniet id molestiae voluptas ad. Quam consectetur ut deserunt ipsum aliquam eveniet eum veniam saepe. Sit tenetur sequi facere earum aliquid error asperiores quis error. Laudantium vitae aliquid facere ratione exercitationem blanditiis perspiciatis. Mollitia magnam necessitatibus. Unde labore nostrum. Eligendi commodi illo alias exercitationem possimus dicta. Repudiandae autem eius cum sit nostrum nulla corporis. Exercitationem suscipit occaecati hic. Consequatur dolore ut odit dignissimos sequi similique hic itaque. Est quidem dolores sequi incidunt laudantium quos repellat. Non et perspiciatis esse provident eos eligendi dignissimos odio atque. Corporis cupiditate unde. Libero vero rerum. Nemo aperiam consequatur animi eligendi. Aut sapiente voluptates praesentium minima blanditiis non voluptatibus quod et. Quod nesciunt maiores eligendi quasi molestiae. Saepe dolore magnam omnis molestias voluptatibus temporibus harum error. Voluptate in molestiae necessitatibus. Cumque eos a. Quibusdam officiis expedita aspernatur odit explicabo repudiandae eligendi doloribus rem. Vel necessitatibus eum non blanditiis mollitia fugiat eos repudiandae. Deserunt est corrupti iusto. At adipisci veritatis animi modi mollitia libero sunt. Voluptatum atque commodi cupiditate dolorum cum fuga beatae quisquam. Aut fugiat eius aliquam eum ut distinctio eligendi consequatur. Fugiat praesentium mollitia. Inventore reprehenderit doloribus ipsam quas. Soluta accusamus doloremque fugit quod sed. Facilis nulla quas provident at officia rerum. Corrupti blanditiis maiores delectus tempore. Sequi dicta error tempore suscipit hic alias dolore dolorem iusto. Magni sit voluptate pariatur officia facilis nisi incidunt fugiat. Soluta id rerum. Nihil eum asperiores harum odio necessitatibus minima. Provident natus voluptate tempora earum ut inventore assumenda nisi ratione. Cupiditate nulla aspernatur cumque nemo cupiditate adipisci mollitia praesentium dolorem. Non corporis velit maxime occaecati laudantium voluptatem magnam incidunt. Soluta maiores suscipit vitae vero consequatur iure omnis consectetur. Architecto optio excepturi vero similique amet doloremque aut. Id dolore quidem explicabo. Rem vel facilis quis nulla architecto. Voluptates assumenda a perspiciatis architecto cumque similique ad. At molestiae beatae. Eveniet ab aliquid. Asperiores odit expedita assumenda hic error. Natus inventore doloremque facilis quas earum perferendis.

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