Introduction
Tailwind CSS offers a unique approach, unlike the traditional CSS framework. Its fresh perspective and utility-first design are liked by the developers. With more than 50 thousand stars on GitHub and NPM 4.6 million downloads, it’s evident that the Tailwind CSS is a highly sought-after front-end development tool. When it is paired with Next.js, this duo creates a robust framework to build efficient and expandable solid server-side rendered web applications. This article walks you through various methods to set up a Next.js project with Tailwind CSS.
Steps to Install Tailwind CSS
- Firstly, you need to install Node.js on your laptop.
- Secondly, open the terminal and run the following command “npx create-next-app my-tailwind-project” to create a new project.
- Once done, write the command “cd my-tailwind-project” and navigate to the project directory.
- Next, you can install Tailwind CSS and dependencies by using the following command “npm install tailwindcss postcss autoprefixer”
- Now, that you have done the first part, it is time to configure it to work with Next.js. This next section walks you through the steps.
Step to Configure Tailwind CSS
You need to first create a new file as postcss.config.js in the root directory of the project.
Once done, add this code in the file “module.exports = {
plugins: [ 'tailwindcss',
'postcss-flexbugs-fixes',
'postcss-preset-env',
[ 'postcss-normalize',
{allowDuplicates: false,
},
],
['@fullhuman/postcss-purgecss',
{ content: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [] } ], 'autoprefixer',
],};”
This code will configure the setup of Tailwind CSS as well as add all the necessary PostCss plugins and PurgeCSS to discard the unused CSS from the production. The next section highlights the importance of generating a default Tailwind CSS configuration file to customize the Tailwind CSS. This configuration plays a crucial role in defining the color palette, spacing utilities, typography settings, and many more.
Read more- What is Next.js? And What it is Used for?
What is the Importance of a Default Tailwind CSS Configuration?
Tailwind.config.js file provides an object that allows customization and extends the default configuration, making it one of the essential parts of Tailwind CSS. Moreover, it provides flexibility to extend utility classes, modify theme customization, and purge unused CSS.
Customization, on the other hand, allows defining design systems and utility classes to align with your application requirements. You can write the following command “npx tailwindcss init” to generate the Tailwind CSS for default configuration.
Steps to Customize Tailwind CSS
The following are the steps to customize Tailwind CSS according to your project’s needs.
First, you need to specify the purged file using the purge option using this code “module.exports = { purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],”, this ensures only the CSS classes used.Then, you need to disable the dark mode function by adding this code” darkMode: false, theme:”, thi will set the darkmode theme to false.
After that, add the following code: “{extend: {
colors: {
primary: '#FF0000',
secondary: '#00FF00',
},” to extend the color palette with two custom colors i.e., primary and secondary.
Once done, you need to customize the font family using this code “fontFamily: {
sans: ['Roboto', 'Arial', 'sans-serif'], },}, },”, this will include the fonts Arial, Roboto, and the generic sans-serif fallback.
Lastly, you can keep the variants and plugins section empty by adding this code “variants: {extend: {},
},plugins: [],
};”.
The above given steps for basic configuration. That’s the reason we have kept the variants and plugins section empty. If you want to customize it further, we highly recommend you to check the official documentation of Tailwind CSS. Furthermore, Tailwind CSS allows flexibility to tailor the framework according to your project’s needs. Once you are done with customizations, save the tailwind.config.js file, then proceed to the next section.
Steps to Import Tailwind CSS Styles
- Open your “pages/_app.js file” and write the following code “import ‘tailwindcss/tailwind.css‘;” to import the file.
- Next, add this code ” function MyApp({ Component, pageProps }) { return <Component {…pageProps} />;} export default MyApp;”, it will import and compile the Tailwind CSS styles. Further, apply them to the entire application.
- Now, you are all set to begin your development server and see the tailwind CSS in full action.
Steps to Get Started with the Development Server
- Run the following command “npm run dev” on your laptop/computer first.
- Then, type the given URL in your browser http://localhost:3000, you will find that the Tailwind CSS styling with Next.js is applied.
- After that, it will generate the necessary CSS styles for a production-ready build of your application.
- Now, you have successfully set up Tailwind CSS with Next.js.
Why Use Tailwind CSS with Next.js?
Pranisha Rai
Set up a Next.js project with Tailwind CSS. Follow the steps to install Tailwind CSS. Will Tailwind CSS become the future of CSS? Read now
PublishedOctober 18, 2023
Categorytailwind Next.js setup
Don’t miss the next one.
We publish essays on engineering, hiring, and building teams. Subscribe and we’ll send them when they land.
Unsubscribe anytime · one letter, never more