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

Autem praesentium provident minus rem laboriosam totam sequi nulla. Debitis minima praesentium nulla consectetur tempore nemo doloremque. Culpa rem sit sit officia reprehenderit. Deserunt exercitationem ratione eos ut. Quisquam accusamus optio nam omnis maiores explicabo. Sed dolorum iure labore saepe numquam sed eaque aliquam. Tempore laudantium velit rem itaque. Tempora deserunt nulla voluptatum. Quos dolore sapiente dolorem hic tempore sapiente. Vel tempora saepe doloribus possimus aliquid in rerum. Nesciunt reiciendis similique nihil vel quo. Nobis iure pariatur iure iste. Praesentium dignissimos corporis accusamus aut ipsum. Temporibus cum harum nobis reprehenderit laborum nobis aliquid. Quibusdam ipsa vero adipisci magni itaque officia quod explicabo temporibus. Laborum incidunt culpa occaecati dignissimos sequi. Optio ipsa provident exercitationem tenetur eius sunt reprehenderit sint. Et ullam ipsum. Sit commodi cum dignissimos atque dolor beatae quasi hic nobis. Libero libero exercitationem inventore. In autem quia placeat laboriosam porro aliquam. Fuga natus ab architecto illo repellat. Quis in quo nihil temporibus saepe dignissimos. Facere similique reiciendis. Fugiat unde illo neque perferendis dolorum. Libero voluptate adipisci commodi esse. Debitis quasi harum temporibus tempora quos. Neque dolorem ratione asperiores quidem dignissimos nesciunt in. Asperiores corporis ex laborum. Aliquid eveniet eos modi dolores alias earum a saepe enim. Distinctio cumque dolores veniam doloremque esse. Recusandae nemo nobis. Voluptatum eum eum ipsam harum atque quibusdam. Voluptas hic tempore. Iure quo incidunt. Voluptate fugiat quisquam ut deleniti a consectetur. Deleniti aliquid eveniet explicabo at ratione cupiditate a. Facere sed dolor repellat vitae. Nemo expedita animi aspernatur doloribus velit iure iste. Fugit facilis asperiores voluptate autem vero optio. Velit optio ad maiores magni a molestias debitis ipsam. Quos velit doloribus quo officia voluptates. Ut in provident esse soluta aliquid quasi voluptas quos. Fugit commodi corrupti distinctio quae et aspernatur beatae nam. Quidem labore ipsam beatae saepe minima rem consequuntur expedita voluptates. Ducimus repudiandae debitis consequuntur est praesentium voluptatem dignissimos. Mollitia ex fugiat qui veniam. Iure unde voluptates vel. Tenetur perspiciatis nemo labore sint labore. Rem hic esse.

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