Tips & Tricks for learning Tailwind CSS 414 words.
Last Updated
The following tutorial will get you up and running with Tailwind CSS, empowering you to build a beautiful, responsive, and animated websites quickly. We will build a side navigation menu inspired by Discord.
Setup
Install the Tailwind VS Code extension
Install the Tailwind VS Code extension.
Use a JS Framework
Feel free to use the JS framework of your choice. This tutorial uses Create React App.
Discord-Inspired Icon Navbar
Make the App a Flexible Container
Create a flexbox row by simply adding the flex utility to the parent element.
function App() {
return (
<div className="flex">
</div>
);
}
Position the Sidebar
Combine Tailwind utility classes to position the sidebar. When hovering over each class in VS Code, it will display its true CSS values.
const SideBar = () => {
return (
<div className="fixed top-0 left-0 h-screen w-16 m-0
flex flex-col
bg-gray-900 text-white shadow-lg">
</div>
);
};
Add Icon Buttons
To quickly add an icon button to the navbar, install react-icons.
npm install react-icons
import { BsPlus, BsFillLightningFill } from 'react-icons/bs';
import { FaFire, FaPoo } from 'react-icons/fa';
const SideBar = () => {
return (
<div className="...">
<SideBarIcon icon={<FaFire size="28" />} />
<SideBarIcon icon={<BsPlus size="32" />} />
<SideBarIcon icon={<BsFillLightningFill size="20" />} />
<SideBarIcon icon={<FaPoo size="20" />} />
</div>
);
};
const SideBarIcon = ({ icon }) => (
<div className="sidebar-icon group">
{icon}
</div>
);
Use Apply to Create Custom Classes
The @apply directive allows you to compose custom CSS classes by combining Tailwind classes. It can be useful in situations where extracting a JS component does not make sense.
@layer components {
.sidebar-icon {
@apply relative flex items-center justify-center
h-12 w-12 mt-2 mb-2 mx-auto shadow-lg
bg-gray-800 text-green-500
hover:bg-green-600 hover:text-white
rounded-3xl hover:rounded-xl
transition-all duration-300 ease-linear
cursor-pointer;
}
}
Animated Tooltips
Create Tooltip Container
Each icon button has a tooltip as a child that is invisible by default.
const SideBarIcon = ({ icon, text = 'tooltip 💡' }) => (
<div className="sidebar-icon">
{icon}
<span class="sidebar-tooltip">{text}</span>
</div>
);
.sidebar-tooltip {
@apply absolute w-auto p-2 m-2 min-w-max left-14
rounded-md shadow-md
text-white bg-gray-900
text-xs font-bold
transition-all duration-100 scale-0 origin-left;
}
Animated with Group
Create groups to animate a child when the state of the parent changes.
The tailwind group class does not work within @apply. It must be used inline.
const SideBarIcon = ({ icon, text = 'tooltip 💡' }) => (
<div className="sidebar-icon group">
{icon}
<span class="sidebar-tooltip group-hover:scale-100">{text}</span>
</div>
);