Using Tailwind CSS for Styling

Explain how to integrate Tailwind CSS in a Next.js 14 project for utility-first styling, including configuration and adding styles to a component.

import 'tailwindcss/tailwind.css';

Importing the compiled Tailwind CSS in the '_app.js' file of a Next.js project. This ensures that Tailwind's styles are available throughout your application.

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Creating or updating the 'tailwind.config.js' file. It specifies the paths where Tailwind should look for class usage to enable PurgeCSS for removing unused styles in production.

const Button = () => (
  <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Click me
  </button>
);

Creating a React component with some Tailwind CSS classes applied to a button. The classes define the button's background color, text color, font weight, padding, and border-radius.