Tailwind CSS is a great option if you want to style your app using a fast, flexible, and reliable framework. Tailwind is a CSS framework that helps design custom web components. Design your components without switching between HTML and CSS files.
Unlike Bootstrap, Tailwind has no predefined classes. Instead, you can customize your own. Tailwind allows you to build complex components using primitive utilities, functions and directives.
Learn how to install and use Tailwind to create amazing user interfaces in your Next.js projects.
Install Tailwind CSS in Next.js
Start by installing Tailwind in your Next.js application. The process is similar to installing Tailwind in your React app, but the configuration process is slightly different.
Go to the Tailwind CSS installation page. next, Framework guide section and selection Next.jsThis section contains all the steps required to set up Tailwind in your Next.js project.
To install Tailwind via npm, the JavaScript package manager, run the following two terminal commands:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
These commands create two configuration files named . tailwind.config.js and postcss.config.js It’s in the root project folder. These files indicate that TailwindCSS has been successfully installed. You can also install Tailwind CSS using the Tailwind CLI or as a PostCSS plugin.
Template configuration
After installation, the template path provided in the installation guide should be configured in the app config file.the following code tailwind.config.js file:
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Add the Tailwind directive to your app
Then add the following Tailwind directive to your app CSS file:is a file named global.css. We need to delete the contents of the global.css file and add the Tailwind directive.
@tailwind base;@tailwind components;
@tailwind utilities;
Run the build process
Then, in your terminal, run the CLI tool with the following command:
npm run dev
This command scans the template file for classes and builds the CSS. A port is opened for viewing the browser.
Now, when I go to the next server, http://localhost:3000 You should see your app. You should notice a slight change in content. This indicates that the installation process was successful and Tailwind CSS is enabled.
Using Tailwind in your project
Now let’s apply the class to our project and test the Tailwind CSS functionality. For example, let’s say you have an app with the text “Hello Tailwind”. I want to give a red color to a light blue background.
create home.tsx Add the following code to the file.
export default function Home() {
return (
<body className="bg-blue-300">
<h1 className='text-red-900'>Hello Tailwind CSS</h1>
</body>
);
}
If you go to your browser, you’ll see that the text has turned red and the background is now blue.
You can explore other Tailwind CSS features to style other components of your app. Conditional modifiers allow you to create reactive states such as hover and focus. You can also customize the page into dark and light modes according to your preferences.
Benefits of using Tailwind CSS
Created by Adam Wathan in 2017, Tailwind CSS differs from other CSS libraries in many ways. It has zero execution time, so it’s very fast. And it’s easy to install. Tailwind scans all HTML files and JavaScript components looking for app class names. Then generate the corresponding styles that design the elements.
Tailwind CSS allows you to design complex components from primitive utilities. You can reuse styles across components and use modifiers to style your responsive UI. Use these instructions to learn how to install and use Tailwind CSS to customize your app to match your brand.
