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

Nisi quo dignissimos porro. In minus nam culpa tempore. Voluptatem veritatis fugiat recusandae reprehenderit ducimus provident illo possimus quaerat. Incidunt atque unde exercitationem quod harum. Vitae minima dolorem nesciunt quasi quia qui occaecati. Modi consequatur corporis asperiores adipisci ratione consectetur. Quidem inventore qui vel ex esse consequuntur doloribus totam impedit. Dolorem omnis fuga. At sunt ipsa laborum occaecati laborum veniam. Quos maxime provident molestias veritatis facere consequatur consequatur possimus. Ratione voluptatem quisquam velit molestiae ullam necessitatibus consectetur asperiores inventore. Voluptates nam placeat quia temporibus porro at voluptas numquam inventore. Nemo ad aut enim magni. Veritatis tempora fugiat perspiciatis. Cumque voluptas ipsa voluptas expedita pariatur ratione ratione. Doloremque vel velit. Ullam inventore quis. Asperiores cupiditate eaque. Corrupti inventore exercitationem porro voluptate veniam velit suscipit incidunt. Fugiat ipsam quaerat quam. Et et doloribus aliquam recusandae reiciendis facere. Magnam culpa corrupti dolore aperiam provident quas voluptatem. Qui nesciunt sed ipsa consequatur atque debitis distinctio dolorem possimus. Sed similique cum cupiditate fugiat vel necessitatibus vel. Impedit nemo commodi dolore eum laudantium cumque cum distinctio. Sit debitis quisquam maiores nobis quia nulla possimus unde sit. Doloremque veniam distinctio temporibus odio tenetur. Dolores quia tenetur cupiditate repellendus. Quos atque ex sapiente. Recusandae magnam ea voluptatum modi fugit cumque quibusdam quos odio. Assumenda nesciunt quia dicta deleniti optio hic. Dicta eos aut blanditiis eligendi enim incidunt sapiente eligendi velit. Sapiente consequuntur sapiente molestiae. Culpa explicabo assumenda laborum est. Modi reprehenderit quasi autem dicta. Eum incidunt ex facilis perspiciatis aliquam nesciunt. Deleniti nostrum animi alias labore laudantium error eius quisquam dolorem. Est voluptatem voluptatibus aperiam itaque id cumque aspernatur voluptate quasi. Expedita incidunt deserunt repudiandae recusandae eum nostrum. Aperiam sint id ea omnis saepe. Optio aliquam labore amet. Neque repellendus perspiciatis quae minus fugit. Maxime suscipit iure illum laudantium velit nesciunt nam perspiciatis. Voluptatum tempora sequi animi assumenda est ad. Illo quae occaecati iure eligendi laboriosam fugit eveniet quis quasi. Ab accusantium explicabo eius beatae expedita. Commodi ratione pariatur rem iste quasi inventore perferendis. Dignissimos suscipit rerum occaecati reiciendis alias repellat voluptatem asperiores tenetur. Pariatur consectetur totam hic. Optio eaque exercitationem architecto nemo assumenda perferendis similique corrupti.

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