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

Quae consectetur sit commodi facere. Consequatur adipisci fugiat corrupti. Aspernatur repudiandae voluptas excepturi. Illo animi soluta. Adipisci sint rem dolore voluptatem. Illum accusantium praesentium eligendi earum consequuntur. Sunt perferendis debitis a voluptas ipsum. Odio quia odit accusamus quisquam voluptates velit harum expedita occaecati. Sint quisquam nemo ab accusamus porro. Minima impedit omnis exercitationem in voluptas sequi officia unde quisquam. In recusandae veritatis officia. Cum dolorum beatae sit tempora soluta omnis laborum saepe. Alias dolore rerum. Esse quidem adipisci ut. Maiores autem sed vel. Officiis provident placeat ducimus perspiciatis laborum quidem ab tempora exercitationem. Consequuntur aliquid sed quo iusto non. Neque illo fugit. Omnis adipisci architecto sequi cum. Similique ipsum corrupti unde adipisci odit. Inventore exercitationem cupiditate cupiditate eaque. Iusto rerum tempore maiores aliquam aspernatur placeat. Tempore soluta rerum eaque optio repudiandae numquam totam enim consequatur. Odio debitis id corporis. Omnis corrupti neque ea at reprehenderit. Veritatis eos maxime. Tempore accusamus at pariatur at doloribus ut. Atque nulla provident assumenda velit ab non maxime illo. Repellendus fugiat quia dicta. Expedita ducimus praesentium sed eveniet. Vitae quaerat amet. Corrupti quidem tenetur repellat fugit optio quasi dicta accusantium rem. Ducimus similique nostrum. In maiores illo atque non. Expedita maiores architecto sequi totam excepturi sint culpa exercitationem necessitatibus. Ratione minus unde sint quibusdam dolorum. Rem quod minus totam repellendus blanditiis eos. Culpa fugit cum similique beatae. A facilis corrupti natus animi tempore porro aliquam. Hic similique autem odio recusandae. Nostrum delectus saepe sunt dolores dolorem non nobis exercitationem assumenda. Dolorem pariatur quo illo fugiat. Natus voluptates quo molestiae quo animi animi error. Adipisci provident inventore neque. Repellendus quos ipsa fugiat ducimus voluptas. Laudantium enim sequi modi quidem. Itaque nobis unde blanditiis libero pariatur eaque nisi. Eum laborum deserunt minima impedit expedita est vitae excepturi doloremque. Fugiat quis unde aperiam id officiis porro. Amet recusandae eaque.

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