(Welcome to my first post on dev.to!)

<a href="https://tailwindcss.com">Tailwind CSS</a> is a framework which supports you in creating front ends at pace. You can create visually stunning websites and applications without having to code a single line of CSS! It's great for getting projects off the ground quickly and ideal for prototypes (and full scale applications). Sounds amazing right?

Setting up tailwindcss in your next.js application is a breeze and this tutorial will show you how.

<h2>
 <a href="#step-1-set-up-nextjs">
 </a>
 Step 1 - Set up Next.js
</h2>

If you already have a Next.js application you can skip this step. Worth noting this tutorial assumes you are running Next.js version 10 or later.

To setup your Next.js all you need to do is run the following command in your favourite terminal: 


<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>npx create-next-app my-tailwind-app
</code></pre>

</div>



Replace <code>my-tailwind-app</code> the the name of your application.

For the following steps your terminal location needs to be in your application root, so run: 


<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>cd my-tailwind-app
</code></pre>

</div>



<h2>
 <a href="#step-2-install-tailwind">
 </a>
 Step 2 - Install Tailwind
</h2>

To use tailwind you need 3 packages, <code>tailwind</code>, <code>postcss</code> and <code>autoprefixer</code>. 


<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code># If you're using npm
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# If you're using yarn
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
</code></pre>

</div>



<h2>
 <a href="#step-3-setup-the-config-files">
 </a>
 Step 3 - Setup the config files
</h2>

We need to set up two config files, one for tailwind and one for postcss. The simplest way to do this is to run: 


<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>npx tailwindcss init -p
</code></pre>

</div>



Like magic <code>tailwind.config.js</code> and <code>postcss.config.js</code> will appear on your application root!

<h2>
 <a href="#step-4-start-the-purge">
 </a>
 Step 4 - Start the purge
</h2>

Tailwind is a big library and you don't want loads of unused styles in your production app which could lead to poor front end performance.

Tailwind can purge all the unused styles, speeding things up nicely for your users.

Update your <code>tailwind.config.js</code> with the following: 


<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code>module.exports = {
 purge: ['./pages/**/*.{js,ts,jsx,tsx}'],
 darkMode: false, // or 'media' or 'class'
 theme: {
 extend: {},
 },
 variants: {
 extend: {},
 },
 plugins: []
}
</code></pre>

</div>



Here we are telling tailwind to look in our pages folder for the styles we use. This will cover off both JS and TypeScript files.

It's common to have other folders such as <code>/components</code> in our structure and you can easily add those folders to the <code>purge</code> array. For example: 


<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code>module.exports = {
 purge: ['./pages/**/*.{js,ts,jsx,tsx}','./components/**/*.{js,ts,jsx,tsx}'],
 darkMode: false, // or 'media' or 'class'
 theme: {
 extend: {},
 },
 variants: {
 extend: {},
 },
 plugins: []
}
</code></pre>

</div>



<h2>
 <a href="#step-5-include-tailwind-in-your-application">
 </a>
 Step 5 - Include tailwind in your application
</h2>

Now all you need to do is include tailwind in the application. Simply update <code>/pages/_app.js</code> with the following: 


<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code>import 'tailwindcss/tailwind.css'

function MyApp({ Component, pageProps }) {
 return &lt;Component {...pageProps} /&gt;
}

export default MyApp
</code></pre>

</div>



You will also want to remove the styling in your <code>/pages/index.js</code> application however you'll likely rewrite that file anyway.

All you need to do now is start writing your application! The docs over at <a href="https://tailwindcss.com/docs">https://tailwindcss.com/docs</a> are fantastic and are a great resource to have to hand.

Enjoy building!

(Welcome to my first post on dev.to!)
Tailwind CSS is a framework which supports you in creating front ends at pace. You can create visually stunning websites and applications without having to code a single line of CSS! It's great for getting projects off the ground quickly and ideal for prototypes (and full scale applications). Sounds amazing right?
Setting up tailwindcss in your next.js application is a breeze and this tutorial will show you how.
If you already have a Next.js application you can skip this step. Worth noting this tutorial assumes you are running Next.js version 10 or later.
To setup your Next.js all you need to do is run the following command in your favourite terminal:
npx create-next-app my-tailwind-app

Replace my-tailwind-app the the name of your application.
For the following steps your terminal location needs to be in your application root, so run:
cd my-tailwind-app

To use tailwind you need 3 packages, tailwind, postcss and autoprefixer.
# If you're using npm
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# If you're using yarn
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

We need to set up two config files, one for tailwind and one for postcss. The simplest way to do this is to run:
npx tailwindcss init -p

Like magic tailwind.config.js and postcss.config.js will appear on your application root!
Tailwind is a big library and you don't want loads of unused styles in your production app which could lead to poor front end performance.
Tailwind can purge all the unused styles, speeding things up nicely for your users.
Update your tailwind.config.js with the following:
module.exports = {
 purge: ['./pages/**/*.{js,ts,jsx,tsx}'],
 darkMode: false, // or 'media' or 'class'
 theme: {
 extend: {},
 },
 variants: {
 extend: {},
 },
 plugins: []
}

Here we are telling tailwind to look in our pages folder for the styles we use. This will cover off both JS and TypeScript files.
It's common to have other folders such as /components in our structure and you can easily add those folders to the purge array. For example:
module.exports = {
 purge: ['./pages/**/*.{js,ts,jsx,tsx}','./components/**/*.{js,ts,jsx,tsx}'],
 darkMode: false, // or 'media' or 'class'
 theme: {
 extend: {},
 },
 variants: {
 extend: {},
 },
 plugins: []
}

Now all you need to do is include tailwind in the application. Simply update /pages/_app.js with the following:
import 'tailwindcss/tailwind.css'

function MyApp({ Component, pageProps }) {
 return <Component {...pageProps} />
}

export default MyApp

You will also want to remove the styling in your /pages/index.js application however you'll likely rewrite that file anyway.
All you need to do now is start writing your application! The docs over at https://tailwindcss.com/docs are fantastic and are a great resource to have to hand.
Enjoy building!

David Hayes

Dev.to feed

Setting up Tailwind CSS with Next.js in two minutes