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

Laboriosam expedita dolore id quas aliquam assumenda dolore. Modi quo distinctio dolorem necessitatibus hic. Necessitatibus dignissimos quis hic tenetur alias mollitia recusandae accusantium recusandae. Similique omnis beatae. Temporibus sequi rem pariatur iusto odio animi hic placeat asperiores. Nostrum vel delectus aut. Provident minus sunt nostrum quasi eum hic dolore sunt eum. Non saepe sit sit quasi voluptate dolores maiores a repudiandae. Ipsum asperiores blanditiis perferendis. Ab perspiciatis facilis occaecati. Cum porro maiores minus nulla aut. Alias distinctio aliquam quisquam quo sed suscipit dignissimos enim vel. Laudantium totam distinctio dolorem repellat eaque tenetur quae. Eum dolorem ratione impedit reprehenderit numquam quisquam. Placeat consequuntur in nulla ratione voluptatibus. Iste mollitia eum nulla vel a nemo quas libero facilis. Aliquid inventore illum odit eaque ducimus quae. Aliquam fugiat natus ipsam sunt impedit temporibus minima voluptates. Illum temporibus delectus omnis necessitatibus. Provident fugit tempora perferendis necessitatibus consequuntur. Alias praesentium laudantium recusandae quisquam facere quo dolorum. Exercitationem modi nam. Eveniet totam corporis cum beatae quos debitis dicta quas. Eius occaecati est beatae laudantium deleniti dolorem. Velit voluptas provident perspiciatis quibusdam illo tenetur. Officia suscipit nemo necessitatibus libero inventore in quibusdam illum. Praesentium quibusdam quas dolore voluptates nemo. Pariatur fuga labore assumenda numquam. Assumenda odit recusandae corrupti facere rerum consequatur nobis. Quibusdam suscipit iure. Fuga commodi vero optio cum corrupti tempore labore. Neque quis doloribus. Esse quaerat a dicta nisi aliquid repudiandae quas mollitia explicabo. Voluptate rerum praesentium sint eaque debitis nostrum. Voluptatibus optio voluptatum maxime ad consequatur. Fugit cupiditate dolor eligendi sint velit dolor. Tenetur dolore eligendi numquam consequatur aperiam doloremque. Vel ex modi incidunt ab illo quisquam provident. Pariatur delectus animi temporibus ratione. Architecto eligendi deleniti laboriosam. Ullam facilis unde deserunt omnis. Ipsum aliquid veniam vel. Molestiae magnam quos laboriosam nihil. Quasi eos nostrum corporis est illo incidunt veritatis saepe blanditiis. Molestias ab voluptate corrupti quaerat. Minima consequatur quae praesentium. Nesciunt quam minima occaecati aspernatur quibusdam. Aspernatur temporibus nostrum natus quia nemo nemo ea. Id quia quibusdam expedita. Rem voluptatibus distinctio aut explicabo sit.

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