Tailwind Crash Course - Project Based Learning
Other Utilities
Before we wind up this course, There are couple of other utilities that I think are important for you to know about.
The first one is Shadow.
.shadow-{size}| Sizes | |
| md lg xl 2xl inner outline none |
<html>
<head>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="h-screen bg-gray-200 flex justify-center items-center p-6">
<!-- adding .shadow-lg to the box-->
<div class="shadow-lg bg-blue-900 text-blue-200 w-40 h-40 flex justify-center items-center">
Here is a cool box
</div>
</body>
</html>Use Lecturely's Code Editor and try to change shadow sizes and see real time result.
The second one is Opacity
We have 5 shades of opacity
| Percentages | |
| 100 75 50 25 0 |
<html>
<head>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="h-screen bg-gray-200 flex justify-center items-center p-6">
<!— adding .opacity-25 to the box—>
<div class="opacity-25 bg-blue-900 text-blue-200 w-40 h-40 flex justify-center items-center">
Here is a cool box
</div>
</body>
</html>Use Lecturely's Code Editor and try to change opacity percentage and see real time result.
The third one is Cursor
| Styles | |
| default pointer wait text move not-allowed |
To add a different cursor, we simple need to add .cursor-{one of the styles}. {default} is just a regular cursor. So, Let’s take example of {move} style. When we use move. This would be useful if we have some drag and drop kind of functionality. This is where it will be come handy.
<html>
<head>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="h-screen bg-gray-200 flex justify-center items-center p-6">
<!—adding .cursor-move —>
<div class="cursor-move bg-blue-900 text-blue-200 w-40 h-40 flex justify-center items-center">
Here is a cool box
</div>
</body>
</html>pointerwill look like a link.waitwill be like a spinning ball.textwill look like if you are about to edit some textmove, you already saw in above examplenot-allowedsimply puts a no-sign by the cursor.
Use the our Code Editor and try to change cursor styles and it in-action.
Upnext is Select
We all know that we can select some text. We do double clicking to select one single word or we can triple click to select the whole paragraph. But some-times you may not want your users to be able to select the text from your web application. So select comes here.
Add .select-none and it will not allow users to select text. Simple. Right? Let’s take a look at the styles available.
| Styles | |
| none text all auto |
.select-all is a cool thing. If you add .select-add, with a single click, a complete paragraph will be selected. This is good when you give your users an option to copy something from your web page. Like a key or code example.
.select-auto is just a regular selection.
The last one is Screen Readers
.sr-only
.not-sr-onlyAs our applications get more and more advanced, we can never forget about the accessibility of our websites. So, .sr-only would visually disable an element but keep elements available for screen readers. .not-sr-only simply does the opposite.
