Get Started with Tailwind CSS
July 4, 2024[Tailwind CSS Quick Guide]
Tailwind CSS framework is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. See the official website for more details.
Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.
It’s fast, flexible, and reliable — with zero-runtime.
Here is a step-by-step guide to getting started with Tailwind CSS, including setting up your environment for Tailwind CSS support, how to style your contents with the pre-defined classes, and how @apply
directive can be used for elements which are generated by static site generators like Hugo.
And we’ll build the following web page finally.
Installation
Install Node.js and Tailwind CSS according to the offical guide. You can also refer to the commands I used, but it may changed in the future.
Install Node.js
Here is the offical guide to install Node.js: https://nodejs.org/en/download/package-manager
E.g., to install it on linux with NVM (Node Version Manager):
# installs NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# download and install Node.js
nvm install 20
# verifies the right Node.js version is in the environment
node -v # should print `v20.13.1`
# verifies the right NPM version is in the environment
npm -v # should print `10.5.2`
Install Tailwind CSS
Here is the offical guide to install Tailwind CSS: https://tailwindcss.com/docs/installation
You can play it with CDN without any installation, but it is not my favorite way to use it, because I don’t want to include unnecesary CSS styles in my website. Instead, I prefer to using Tailwind CLI to generate necessary CSS styles from html, js or any templates where they are used.
Install Tailwind CLI:
npm install -D tailwindcss
Setup Your Project
Create a directory
mkdir tailwindcss-demo
cd tailwindcss-demo
Configure your template paths
Create tailwind.config.js
npx tailwindcss init
Edit the above config file to add your template paths (highlighted)
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Add the Tailwind directives to your CSS
Add a CSS file index.css
with the following contents:
@tailwind base;
@tailwind components;
@tailwind utilities;
Start the Tailwind CLI build process
Run the CLI tool to scan your template files for classes and build your CSS.
npx tailwindcss -i ./index.css -o ./app.css --minify --watch
Two options can be used:
--watch
: rebuild your CSS when changed--minify
: minify your output CSS file
Start using Tailwind in your web page
Use utility classes
- Add a new HTML file
index.html
- Include the generated CSS stylesheet
app.css
in it - Use Tailwind’s utility classes to style your content
Here is the full content of index.html
:
|
|
I’ll explain how it works in the next post. Now, just open it in your browser to check the result. Don’t forget to refresh the page if changed.
Use @apply
directives
When the content is generated by Hugo, e.g., we cannot add any extra inline class to style it. For this case, we can use @apply
directive.
E.g., here is the generated Table Of Content:
<nav id="TableOfContents">
<ul>
<li>
<a href="#installation">Installation</a>
<ul>
<li><a href="#install-nodejs">Install Node.js</a></li>
<li><a href="#install-tailwind-css">Install Tailwind CSS</a></li>
</ul>
</li>
<li>
<a href="#setup-your-project">Setup Your Project</a>
<ul>
<li><a href="#create-a-directory">Create a directory</a></li>
<li><a href="#configure-your-template-paths">Configure your template paths</a></li>
</ul>
</li>
</ul>
</nav>
We can style it with the following directives in index.css
:
#TableOfContents {
@apply my-10;
}
#TableOfContents a {
@apply no-underline;
}
You can try to style it by yourself, find a proper utility from Tailwind Docs.
That’s it! You’re now set up to start building with Tailwind CSS. Happy coding!