Working with Tailwind in NextJS

In NextJS, you can use the CSS framework Tailwind for styling, which is often used with React. Let's see how to use it.

To work with Tailwind styles, two files are needed: tailwind.config.js and postcss.config.js. Since during the installation of the project we selected the option "use Tailwind styles", these files have already been generated in our project and are located in its root. If these files are not present, you need to install Tailwind according to the official documentation.

Let's add bold weight and a yellow color to the paragraph text using Tailwind styles. In Tailwind CSS, numbers used in color classes represent the intensity or shade of the color. These numbers range from 50 to 900. For the paragraph text, let's choose a medium shade:

export default function Test() {
	return <p className="font-bold text-yellow-500">
		text text text
	</p>;
}

Try using Tailwind styles in your project.