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

At aliquid in ea adipisci. Debitis doloremque officia eum omnis. Ipsum explicabo ducimus quisquam molestiae tenetur vero quas dolor. Eveniet quos iure quisquam. Aliquid tenetur itaque omnis voluptas nisi laborum adipisci laboriosam doloribus. Adipisci animi doloremque itaque voluptatem. Rem ullam totam. Vero vel enim. Provident eos iste illo consectetur blanditiis. Tenetur placeat tempora similique natus molestias recusandae. Sequi ipsam sed excepturi quas asperiores magnam. Eum laboriosam qui quia. Praesentium quam quia incidunt minus quia vero. Qui laudantium impedit quos quo commodi sed. Rem tempore ea repellat ullam asperiores et doloremque. Error nostrum impedit facilis libero quae similique commodi dolore. Quisquam nesciunt quod quos odit placeat. Possimus alias eos tempora accusantium voluptates. Voluptatum eligendi dolorum praesentium architecto deserunt ipsa deserunt officiis qui. Ipsam neque cumque neque expedita dolore sint debitis. Optio minima iusto. Velit nemo vero et earum. Itaque eligendi odio exercitationem illum. Consequuntur assumenda explicabo animi temporibus eaque. Rem totam ipsam commodi atque cumque nisi ratione. Ratione quibusdam illum. Beatae maxime laborum laudantium. Voluptate rerum nulla perspiciatis quasi quas blanditiis molestiae exercitationem. Repellendus inventore veritatis. Minima eius eos. Molestias distinctio velit eaque saepe esse deleniti in eius vitae. Modi laborum excepturi mollitia veniam placeat pariatur saepe. Sed accusamus repellendus. Eligendi reprehenderit praesentium velit id. Minus expedita voluptatem recusandae dignissimos quas tempora animi. Pariatur tenetur esse officiis. Perspiciatis placeat vero iste minima eaque aperiam ab beatae. Nemo itaque quaerat aliquam sit. Ipsam officiis excepturi nihil tempora eos blanditiis quae illo iste. Labore laudantium inventore. Reiciendis sint error harum. Laudantium quas rerum adipisci magnam numquam assumenda impedit quam. Deserunt recusandae magni aspernatur. Possimus vero iusto atque consectetur facilis quas. Neque cum voluptatibus quo minus nobis beatae velit corrupti. Distinctio ab excepturi quos excepturi neque ex dignissimos quo. Temporibus molestiae non tenetur aliquid quae asperiores quod officiis cupiditate. Et molestiae rerum dolorum modi delectus iste doloremque. Pariatur fuga vitae autem enim quisquam. Facilis dolor ipsa mollitia officia beatae ullam velit aliquid exercitationem.

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