Free AI web copilot to create summaries, insights and extended knowledge, download it at here
2713
Abstract
Files</h1><p id="aea6">We need to add a <code>tailwind.config.js</code> and a <code>postcss.config.js</code> file to the root of our application. Use the following command to set this up:</p><div id="ee16"><pre>npx tailwindcss <span class="hljs-keyword">init</span> -p</pre></div><p id="414e">This will create a <code>tailwind.config.js</code> file at the root of your project:</p>
<figure id="59e0">
<div>
<div>
<iframe class="gist-iframe" src="/gist/BetterProgramming/5f1fc501fe510339576a69bd5936c2b1.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
</div>
</div>
</figure></iframe></div></div></figure><p id="21b1">Learn more about configuring Tailwind in the <a href="https://tailwindcss.com/docs/configuration">configuration documentation</a>.</p><p id="374c">It will also create a <code>postcss.config.js</code> file that includes <code>tailwindcss</code> and <code>autoprefixer</code> configured:</p>
<figure id="5464">
<div>
<div>
<iframe class="gist-iframe" src="/gist/BetterProgramming/373cad919a6f591df7649efec7dcce78.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
</div>
</div>
</figure></iframe></div></div></figure><h1 id="d634">Import the CSS</h1><p id="07d3">Let’s create a <code>styles</code> folder and import Tailwind CSS from a CSS file:</p><div id="236d"><pre><span class="hljs-built_in">touch</span> styles/tailwind.css</pre></div><p id="79bb">Inside <code>tailwind.css</code>:</p><div id="33c2"><pre><span class="hljs-variable">@tailwind</span> base;
<span class="hljs-variable">@tailwind</span> components;
<span class="hljs-variable">@tailwind</span> utilities;</pre></div><p id="5160">To add global CSS to a Next.js app, we need to override the default <code>App</code> component. With Next.js 10, you should already have <code>_app.js</code> inside your pages folder. Now import the stylesheet we created:</p><div id="da6f"><pre><span class="hljs-function"><span class="hljs-title">import</span></span> <span class="hljs-string">'../styles/globals.css'</span>
<span class="hljs-function"><span class="hljs-title">import</span></span> <span class="hljs-string">'../styles/tailwind.css'</span>;</pre></div><div id="c873"><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">MyApp</span>(<span class="hljs-params">{ Component, pageProps }</span>) {
<span class="hljs-keyword">return</span> <span class="language-xm
Options
l"><span class="hljs-tag"><<span class="hljs-name">Component</span> {<span class="hljs-attr">...pageProps</span>} /></span></span>;
}</pre></div><p id="cd5c">Cool, now we are ready to add some Tailwind CSS magic to our home page. Go to <code>/pages/index.js</code> (or <code>/pages/index.tsx</code> if you use TypeScript) and add some elements with Tailwind CSS classes. For example:</p>
<figure id="7022">
<div>
<div>
<iframe class="gist-iframe" src="/gist/BetterProgramming/5d768ccc213a3d4eeff44d3955cebd3d.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
</div>
</div>
</figure></iframe></div></div></figure><p id="12b1">Run <code>yarn dev</code> to see your app on <a href="https://localhost:4202/settings/departments">http://localhost:3000</a> in your browser.</p><h1 id="996b">Configure PurgeCSS</h1><p id="d1b6">One problem with Tailwind CSS is the large file size, but <a href="https://github.com/FullHuman/purgecss">PurgeCSS</a> can fix this. PurgeCSS reduces the file size by scanning your HTML and removing any classes that aren’t used. We only want this in production because if we are developing, we want to be able to use any Tailwind CSS class without running the build process.</p><p id="a37c">Now with Tailwind CSS v2, PurgeCSS is already included. All you have to do is update the <code>tailwind.config.js</code> file so Tailwind can tree-shake unused styles in production builds. Update your file like this:</p>
<figure id="c01b">
<div>
<div>
<iframe class="gist-iframe" src="/gist/BetterProgramming/4fe51a3e9e7f33b4e647ffee294f8cdb.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
</div>
</div>
</figure></iframe></div></div></figure><p id="2dad">For now, we check all of our code inside <code>.js, .jsx, .ts or .tsx</code> files that live in either the <code>pages/</code> or <code>components/</code> folder. If you plan to add HTML in other folders like <code>containers/</code> or something, make sure you add that folder to this configuration file.</p><p id="29a2">You can read the guide from Tailwind on <a href="https://tailwindcss.com/docs/optimizing-for-production">optimizing for production</a> to learn more about tree-shaking unused styles for best performance.</p><h1 id="6371">Conclusion</h1><p id="fafc">Now we are ready to work with the latest versions of Next.js and Tailwind CSS without having to worry about bundle sizes!</p><p id="fdfe">That’s it! Thanks for reading. I hope it was helpful.</p></article></body>
