{"id":368179,"date":"2023-02-10T10:01:57","date_gmt":"2023-02-10T10:01:57","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=368179"},"modified":"2026-02-26T13:35:08","modified_gmt":"2026-02-26T13:35:08","slug":"how-to-use-tailwind-css-in-next-js","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-use-tailwind-css-in-next-js\/","title":{"rendered":"Tailwind implementation in Next.js"},"content":{"rendered":"\n

Installing and using Tailwind CSS with Next.js<\/h2>\n\n\n\n

Create your project<\/strong><\/h2>\n\n\n\n

To start creating some UI’s awesome first create a new Next.js<\/a> project to use Tailwind CSS with it. if you don\u2019t have one set up already and if you already created one move on to the next step.<\/p>\n\n\n\n

The most common approach is to use Create Next App<\/a>.<\/p>\n\n\n\n

npx create-next-app@latest<\/pre>\n\n\n\n
after creating the project go inside the project directory and install Tailwind as instructed below:<\/p>\n\n\n\n
Install Tailwind CSS<\/h2>\n\n\n\n
Next, Install tailwindcss<\/code> too and add its peer dependencies via npm, and then run the init command to create both tailwind.config.js<\/code> <\/strong>and postcss.config.js<\/code>.<\/strong><\/p>\n\n\n\n
\/\/For tailwind install\nnpm install -D tailwindcss postcss autoprefixer\n\/\/For config file\nnpx tailwindcss init -p<\/pre>\n\n\n\n
Configure your template paths<\/h2>\n\n\n\n
And then add the paths to all of your template files in your tailwind.config.js<\/strong><\/code> <\/mark>file.<\/p>\n\n\n\n
\/** @type {import('tailwindcss').Config} *\/\nmodule.exports = {\n  content: [\n    ".\/app\/**\/*.{js,ts,jsx,tsx}",\n    ".\/pages\/**\/*.{js,ts,jsx,tsx}",\n    ".\/components\/**\/*.{js,ts,jsx,tsx}",\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}<\/pre>\n\n\n\n
and if you are using the src directory add their path in the content as well:<\/p>\n\n\n\n
".\/src\/**\/*.{js,ts,jsx,tsx}",<\/pre>\n\n\n\n
Furthermore, like this, you can add any path in your config file to use tailwind in that directory.<\/p>\n\n\n\n
Add the Tailwind directives to your CSS<\/h2>\n\n\n\n
Completed the above steps? <\/p>\n\n\n\n
Then Move on to the next step finally, and add the @tailwind<\/strong><\/code> directives for each Tailwind\u2019s layers to your globals.css<\/strong><\/code> file or any file in which you want to use Tailwind.<\/p>\n\n\n\n
@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/pre>\n\n\n\n
Start using Tailwind and create awesome designs<\/h2>\n\n\n\n
After all this finally, you are ready to use tailwind in your next.js project and make UI’s with responsiveness.<\/p>\n\n\n\n
And lots of customization without creating lots of classes and without making your project bulky.<\/p>\n\n\n\n
     <div className="max-w-sm px-8 py-8 mx-auto space-y-2 bg-white shadow-lg rounded-xl sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">\n        <Image\n          src={PLACEHOLDER_IMG}\n          width={80}\n          height={80}\n          alt="demo"\n          className="rounded-full"\n        \/>\n        <div className="space-y-2 text-center sm:text-left">\n          <div className="space-y-0.5">\n            <p className="text-lg font-semibold text-black">Erin Lindford<\/p>\n            <p className="font-medium text-slate-500">Software Engineer<\/p>\n          <\/div>\n          <button className="px-4 py-1 text-sm font-semibold text-purple-600 border border-purple-200 rounded-full hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">\n            Message\n          <\/button>\n        <\/div>\n      <\/div><\/pre>\n\n\n\n
\"name_card\"
Name Card<\/figcaption><\/figure>\n\n\n\n
and if you want to use CSS in an external file:<\/p>\n\n\n\n
.btn{\n@apply text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white;\n}<\/pre>\n\n\n\n
Why choose Tailwind over other CSS frameworks?<\/strong><\/h2>\n\n\n\n
Tailwind CSS is a utility-first CSS framework developed to enable users to create applications faster, more modular, and easier. <\/p>\n\n\n\n
You can use utility classes like text-[], font-[], and hover: to control the layout, color, spacing, typography, shadows. <\/p>\n\n\n\n
And more to create a completely custom component design \u2014 without leaving your HTML or writing a single line of custom CSS only using tailwind.<\/p>\n\n\n\n
Some benefits of using tailwindCss<\/h4>\n\n\n\n
There are many benefits of using the CSS framework Tailwind over other frameworks. Below are the major ones.<\/p>\n\n\n\n