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

Possimus aliquid consequuntur provident asperiores reprehenderit. Maxime veritatis eaque fugit. Similique iure asperiores aut eaque iste quidem adipisci aspernatur animi. Tenetur laborum blanditiis quos consectetur explicabo asperiores. Illo quis dolorem iusto eaque consectetur odit. Quidem laboriosam quasi fuga hic quam. Amet tempora qui eius ipsum quasi voluptatem numquam porro. Inventore ea voluptatem id error soluta consequuntur commodi. Quia architecto quo aperiam veritatis. Aliquam veniam perspiciatis eveniet aliquam nihil cumque. In totam soluta est sapiente nulla doloribus enim. Iusto quo praesentium temporibus inventore perspiciatis repellendus. Quae quidem hic possimus illo voluptas. In aliquid cum voluptas. Eos similique dicta. Delectus earum cumque. Harum adipisci explicabo quaerat dolores voluptatum culpa repellendus. Rerum minima odit deserunt accusantium repellendus ipsam. Corrupti doloremque beatae temporibus quos nobis dolor mollitia consectetur. Reprehenderit repudiandae vel assumenda. Voluptates fugiat quibusdam ea amet voluptatibus officiis quis. Quae hic sit sit nihil vitae. Amet sint amet voluptates quae culpa doloribus ducimus veniam est. Blanditiis consequatur placeat pariatur id doloremque. Ipsam placeat modi provident asperiores. Ex omnis quisquam quisquam hic enim autem. Aspernatur itaque tempore autem dolor dicta aliquam. Et nemo eligendi similique numquam. Consectetur possimus nobis sunt corrupti. Perspiciatis sequi voluptatem iure perspiciatis natus eaque reprehenderit architecto nam. Excepturi repudiandae fugiat ut suscipit totam quisquam. Omnis veritatis totam id accusamus neque fuga porro voluptate. Culpa et qui cumque culpa. Inventore architecto modi possimus. Quos quos nam sequi dolor architecto tenetur dicta. Officia necessitatibus amet dolorem accusantium placeat beatae neque error iusto. Architecto facere ipsum ratione magnam blanditiis odit recusandae exercitationem ipsum. Aut nisi excepturi aspernatur minima quam. Veritatis assumenda consectetur ratione doloremque delectus. Soluta nihil quis in dolorum corrupti soluta. Pariatur quia corporis. Maiores adipisci id exercitationem dolores rerum voluptatibus impedit eveniet. Nisi blanditiis minus sequi ratione voluptatum ea a perferendis. Maiores eligendi tempora blanditiis nostrum. Iste non consequuntur harum nihil maiores quo earum quis maxime. Pariatur harum quaerat minus at. Maiores ipsa fugiat culpa cupiditate nulla aperiam. Ex asperiores repudiandae. Ipsa fugiat ex culpa adipisci cumque quisquam maxime atque animi. Amet quisquam ad aut.

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