Hey, if you are looking for a CSS framework that gives you the ability to fully customize your prototype or web app components, you should definitely try tailwindcss.
In this article I will teach you how to install and setup tailwindcss in Next.js.
Introducing the frameworks.
If you're not familiar with these frameworks,
Tailwindcss: Is a utility first CSS framework that helps you to rapidly build nice user interfaces using easy to remember class names.
Next.js: Is a react based JavaScript framework for building modern applications. Next.js adds to react server-side rendering(SSR), static site generation(SSG) and many other functionalities and is also search engine optimized.
Okay, so let's get into it.
Starting a new Next.js project.
Step 1: Create a new Next.js application.
To create a new next application, run the following code in your terminal. Note Next.js requires Node 12 and up.
npx create-next-app project-name
And navigate into your project directory using:
cd project-name
Steps 2: Install tailwindcss.
Once you are in the project directory, run the following code to install tailwindcss and its dependencies.
npm install -D tailwindcss postcss autoprefixer
After tailwind is successfully installed create the tailwind config file by running the following code.
npx tailwindcss init -p
The -p
command creates a postcss config file in your project directory.
Your directory should now look like this with the two config files
Step 3: Configuring template paths.
By default all of tailwinds classes are added to your project, to make sure that only classes you have used in your project will be exported with your final code we will need to purge our CSS.
In your tailwind config file add the following code in the content property. The code tells tailwind where tailwind classes have been used.
"./pages/**/*.js"
The file path: the code tells tailwind to look inside the pages folder of the root directory ./pages/
for a .js
file or any folder **/
with .js file *.js
inside of it.
Note you can add an array of file paths in the content property.
Step 4: Add tailwindcss directives to global.css file.
To add tailwindcss directives navigate to global.css
file in the styles folder and add the following code.
@tailwind base;
@tailwind components;
@tailwind utilities;
Creating a basic card with tailwind.
With all setup and ready let make a card to check if tailwind is properly installed.
In your index.js file, replace the content with the following code.
export default function Home() {
return (
<div className="w-1/2 mt-32 mx-auto bg-blue-900 p-10">
<p className="m-4 text-gray-200">
Cillum consequat eiusmod adipisicing sint qui mollit. Ut et tempor nulla
excepteur nulla incididunt qui exercitation incididunt. Sint ex
adipisicing pariatur nulla ut ex laborum consequat enim. Et non tempor
laborum irure commodo fugiat mollit nostrud adipisicing nostrud eiusmod
do. Elit velit amet do enim esse ex ipsum velit. Quis consequat sunt
dolore dolor commodo enim anim tempor ipsum.
</p>
</div>
);
}
The code is a simple HTML code with a p
tag inside a div
and tailwind classes added for the styling.
Run npm run dev
in your terminal and open localhost:3000 in your browser.
The result should look like the image below
Conclusion
If you have reached this part of the article without a problem, then tailwind is successfully installed in your project.
If you would love to learn tailwinds classes through video lessons like I did, checkout this youtube video from Scrimba.
Top comments (0)