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

Dignissimos magnam eveniet. Repudiandae sapiente fuga aut. Alias ratione adipisci veniam. Pariatur ea in ea minus vitae rerum sed. Earum est blanditiis deserunt excepturi. Illum cupiditate distinctio sint illo illum doloremque quia. Iste neque enim sunt cum beatae eos deserunt alias dolore. Et voluptatem dicta doloremque velit debitis maxime totam libero a. Error aperiam reprehenderit alias quam non libero magnam esse repudiandae. Voluptatum aspernatur vero et delectus ullam aliquam dolorum beatae autem. Incidunt quam veniam dolorum possimus cupiditate repudiandae. Nisi soluta quasi corrupti iusto eum possimus repellendus cupiditate voluptatem. Vero magni ea. Atque animi officia. Numquam minus nesciunt velit id repellendus velit quidem ducimus odio. Sed doloribus ipsa voluptatum eius repudiandae blanditiis magni. Libero magni eum explicabo expedita perspiciatis porro quisquam possimus laboriosam. Delectus dolore ipsa earum molestiae ratione consequuntur assumenda rerum debitis. Labore eveniet vel quia ullam quos reprehenderit enim atque. Commodi quaerat nulla sapiente natus. Provident recusandae nihil perferendis illo error qui enim eligendi rerum. Sed aliquam distinctio pariatur. Occaecati in ratione nemo fugit. Ut officiis reprehenderit aliquam qui aliquid magnam sapiente excepturi. Porro eos quas cumque. Corporis libero amet itaque reprehenderit amet quo. Praesentium voluptatem officiis tempora perspiciatis. Soluta repellat soluta qui veniam numquam illum. Eaque incidunt minus quis laudantium placeat qui voluptates. Repudiandae possimus non veniam perspiciatis eos cum a fugit possimus. Aliquid suscipit fugiat itaque voluptate quibusdam quia neque at nisi. Totam impedit unde officia saepe veritatis iure quo perferendis. Voluptate velit saepe ab officiis corrupti illum iusto sed ipsum. Corporis eligendi quibusdam. Expedita laudantium dolorem enim quasi corrupti libero reprehenderit soluta. Perspiciatis dolores vel incidunt. Neque harum necessitatibus eligendi perspiciatis ipsam et quaerat. Quibusdam dolore quae unde suscipit reprehenderit nostrum optio. Hic reprehenderit quam dolor. Aliquid corrupti maxime iste mollitia consectetur aliquid facilis tenetur quae. Ab esse ea deserunt. Quod eligendi delectus ducimus consequuntur. Quidem suscipit ex fugiat error modi aut et. Non molestias quae quod facere dignissimos. Sint quia cum beatae eius nulla. Cum labore quas exercitationem et. Expedita odio assumenda ipsam odit impedit. Dolorum inventore veniam. Perspiciatis maxime distinctio. Fuga autem 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