Simple project that uses Tailwind and Next.js.
-
Run the application.
npm install npm start
-
Navigate to http://localhost:3000.
| Tailwind Name | Example | Actual Utility |
|---|---|---|
| flex | flex-1 |
flexbox & grid: flex |
| grid-cols-(col) | grid-cols-6 |
flexbox & grid: flex |
| gap-(length) | gap-x-2 |
flexbox & grid: gap between flexbox & grid items |
| p-(length) | p-6 |
spacing: padding |
| m-(length) | m-6 |
spacing: margin |
| space-(length) | space-x-8 |
spacing: space between elements |
| w-(length) | w-24 |
sizing: width |
| h-(length) | h-24 |
sizing: height |
| bg-(color) | bg-white |
background: color |
| text-(color) | text-slate |
typo: text color |
| text-(size) | text-sm |
typo: text size |
| font-(weight) | font-semibold |
typo: font weight |
| rounded-(size) | rounded-lg |
border: radius |
| divide-(length) | divide-x-2 |
border: divide width |
One great benefit of tailwind is that it will only include the css classes in the final build of the web app based on the classes are defined in the source code during build time. This keeps the final bundle small with just the css classes that are used by the app at runtime.
Tailwind does this by scanning the source code for all tailwind related css classes. Unfortunately, tailwind can only parse and interpret full, static class names in the source code. From tailwind documentation: "If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS."
This is why if you have this in your code, the page will not render correctly at runtime as it does contain the text-red-600 or text-green-600. Source: Tailwind Docs: dynamic class names
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>You must make sure that the class names are reveal in full so that they can be picked up by tailwind during build time. Like this:
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>But there are cases where we absolutely need to use string interpolation or concatenation. In such cases, we need to explicitly inject the full classes in the tailwind config file tailwind.config.js even if the tsx or ts files are just using the dynamically created css classes. This is technique is called safelisting classes by tailwind. Although, for some reason, tailwind discourages this practice.