<h1>Using Tailwind + CSS Modules + SASS and Stylelint with Next.js</h1>
When I first built this site I chose <a href="https://nextjs.org/docs/basic-features/built-in-css-support#sass-support">SCSS</a> along with <a href="https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css">CSS Modules</a> to style it because I was familiar with this approach. That was pretty easy to do with help of the respective sections in Next.js documentation.
After having a working version of the site I revisited the idea to finally play a little with <a href="https://tailwindcss.com/">Tailwind CSS</a> and see if it could fit with in my workflow and styles architecture. I set the following requirements that I wanted the integration had to satisfy:
<ul>
<li>It should allow to define base styles for the whole site.</li>
<li>It should be possible to keep styles separated in SCSS partial files.</li>
<li>It shoulld allow to define styles using Tailwind in CSS Modules.</li>
<li>Allow me to take advantage of Tailwind CSS and its flexibility.</li>
<li>Allow nesting styles with SCSS</li>
</ul>
After a couple hours trying different approaches and configurations I finally was able to come up with a working solution that satisfies my needs.
Let's jump into the solution and implementation!
​
<h2>1. Configuration</h2>
<h3>1.1. Pre-requisites</h3>
I previously had <a href="https://nextjs.org/docs/basic-features/built-in-css-support#sass-support">SCSS</a> and <a href="https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css">CSS Modules</a> working on my site. Follow the instructions in the docs and you should be ready.
<h3>1.2. Add Tailwind CSS to the Project</h3>
For this I simply followed the <a href="https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss">Tailwind CSS example</a> in the Next.js repository.
<h3>1.3. Configure Tailwind</h3>
Nothing special to do here. I just modified <code>tailwind.config.js</code> to adjust the paths to my components and pages folders for the <code>purge</code> directive as I have my source code under the <code>./src</code>. I also extended the <code>colors</code> and <code>fonts</code> configurations.
<pre><code class="hljs language-javascript">module.exports = {
 purge: [
 './src/components/**/*.{js,ts,jsx,tsx}',
 './src/pages/**/*.{js,ts,jsx,tsx}'
 ],
 theme: {
 extend: {
 colors: {
 black: '#000000',
 cornflower: {
 default: '#8ec6eb',
 medium: '#b1d7f1',
 light: '#e5f2fa'
 },
 'steel-blue': {
 default: '#4b89b3',
 dark: '#162a39'
 },
 white: {
 default: '#ffffff',
 'transparent-10': 'rgba(255 255 255 / 10%)'
 }
 },
 fontFamily: {
 primary: ['"Noto Serif"', 'serif'],
 secondary: ['"Quattrocento Sans"', 'sans-serif']
 }
 }
 },
 variants: {},
 plugins: []
};
</code></pre>
​
<h2>2. Using Tailwind in Base Styles</h2>
<h3>2.1. Creating the Main SCSS file for Styles.</h3>
I Added a <code>src/styles/main.scss</code> containing the imports of SCSS partials files. As you can see in the following example it's not really different than what you do in the <a href="https://github.com/vercel/next.js/blob/canary/examples/with-tailwindcss/styles/index.css">normal implementation</a>:
<pre><code class="hljs language-scss">@tailwind base;

/* Write your own custom base styles here */
@import './_base.scss';
@import './_typography.scss';

/* Start purging... */
@tailwind components;
/* Stop purging. */

/* Write you own custom component styles here */

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

/* Your own custom utilities */
</code></pre>
The only difference here is that we use imports instead of declaring styles right in the file. This is something I didn't like about Tailwind but this seemed a good workaround for me.
<h3>2.2. Declaring Base Styles Using Tailwind</h3>
Let's take a look on how to work with Tailwind in our SCSS files.
<pre><code class="hljs language-scss">// file: ./src/styles/_typography.scss

// Importing external CSS code, fonts, etc.
@import url('https://fonts.googleapis.com/css2?family=Quattrocento+Sans:ital,wght@0,400;0,700;1,400&#x26;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&#x26;display=swap');

// Using Tailwind with `@apply` in rules
h1,
h2,
h3 {
 @apply my-4
 font-secondary
 text-cornflower
 font-normal;
}

h1 {
 @apply text-3xl;
 // You can use normal CSS properties too for properties Tailwind doesn't handle:
 background-color: rgba(0, 0, 0, 0.35);

 @screen lg {
 // Important: note that you can't use `lg:text-4xl` as you would
 // normally do when working with classes in HTML. For this you
 // must use the `@screen` directive and the respective breakpoint.
 @apply text-4xl;
 }
}

a {
 @apply text-cornflower
 underline;

 &#x26;:hover {
 // Important: similar to what we did for media queries, we must
 // declare styles for pseudo-selectors using its own rule.
 // Using `hover:text-white` will throw an error when styles compile.
 @apply text-white;
 }
}
</code></pre>
<h3>2.3. Import Styles in <code>./pages/_app.js</code></h3>
I simply added the SCSS file import:
<pre><code class="hljs language-js">import Head from 'next/head';

import '../styles/main.scss';

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
 return &#x3C;Component {...pageProps} />;
}
</code></pre>
That's it! You should have your base styles implementation working wonderfully at this point! Important: this requires to restart the Next.js service.
​
<h2>3. Using Tailwind in CSS Modules</h2>
To add styles using Tailwind in our CSS Modules for components is pretty much the same we did for our base styles.
<h3>3.1. Import the styles module file in our component</h3>
<pre><code class="hljs language-javascript">// file: `./src/components/Header/Header.jsx`

import styles from './Header.module.scss';

const Header = () => {
 return &#x3C;header className={styles.wrapper}>{/* component code... */}&#x3C;/header>;
};

export default Header;
</code></pre>
<h3>3.2. Add module styles</h3>
I used <code>@apply</code>, nesting and Media Queries the same way I did for base styles:
<pre><code class="hljs language-scss">.wrapper {
 @apply py-4
 border-b
 border-solid
 border-white-transparent-10;

 @screen lg {
 @apply border-0
 pt-10
 pb-8;
 }
}
</code></pre>
Done! Now your component is styled with Tailwind CSS! 🙌
​
<h2>4. Bonus: Configure Stylelint to Format and Order Properties automatically</h2>
Note: this is intended for VSCode users but can be easily done in npm scripts or translated to other code editors.
<h3>4.1. Install Dependencies</h3>
<pre><code class="hljs language-bash">yarn add --dev stylelint stylelint-config-recommended-scss stylelint-order stylelint-scss
</code></pre>
<h3>4.2. Add Stylelint Configuration</h3>
<pre><code class="hljs language-json">/* file: ./.stylelintrc.json (remove this comment, no valid JSON) */

{
 "extends": "stylelint-config-recommended-scss",
 "plugins": ["stylelint-order", "stylelint-scss"],
 "rules": {
 "order/properties-alphabetical-order": true,
 "scss/at-rule-no-unknown": null,
 "scss/at-import-no-partial-leading-underscore": null
 }
}
</code></pre>
<h3>4.3. Install VSCode extension and configure it for your project folder</h3>
<ul>
<li><a href="https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint">stylelint</a></li>
</ul>
<pre><code class="hljs language-json">// file: ./.vscode/settings.json

{
 "editor.formatOnSave": true,
 // Run Stylelint fix when you save the file
 "editor.codeActionsOnSave": {
 "source.fixAll.stylelint": true
 },
 // Recommended config for the extension
 "css.validate": false,
 "less.validate": false,
 "scss.validate": false
}
</code></pre>
You're ready. Now when you save your <code>.scss</code> file you should see Stylelint applying the fixes and sorting properties:
<img src="/images/Kapture-2020-08-17-at-14.11.29.gif" alt="Stylelint in action">
Well. It's not very hard to get it to work once you've put all the pieces together and connected correctly. Don't you think?
I hope these notes can be helpful to anyone who may be having a hard time implementing something similar. I would love to see your comments, corrections or questions as well as alternative approaches you could have.

Using Tailwind + CSS Modules + SASS and Stylelint with Next.js

<h1>Welcome!</h1>
<h2>First thing first: thanks for coming!</h2>
This is the kick-off note for my long awaited new space in the Internet. For years I wanted a place where to discuss ideas, share knowledge and to have an space for experimentation.
Some years back, the previous version of this was a Wordpress blog which was eventually abandoned for requiring some maintenance and not being flexible enought.
In between, there was a version of this site that never came to life built using <a href="https://www.gatsbyjs.org/">Gatsby</a>. Despite being a great, flexible tool it also required to dedicate some time to learn some particuliarities.
Then, a few months ago, I had to re-visit <a href="https://nextjs.org/">Next.js</a> to prepare an introductory talk and demo for the front-end developers at the company I'm currently working on, <a href="https://weknowinc.com">weKnow</a>. I've used Next.js before for a large project at Globant but in the days of its 6.x version. So, after a few minutes of exploring the new features and the so-so-easy deployment to Vercels infrastructure I decided it was the right tool for this.
I think we'll dig on it in future notes but the final story is that, after a couple hours of work actionauta is now online.
<h2>Future plans</h2>
I plan to write here about the things that I'm passionate about: Software development (specially Web development), Music, Science, Technology, Games (of any kind) among others.
Also, I plan to add an About Me and Portfolio section showcasing the projects I've had the opportunity to work on, something I've needed to apply for some job positions.
<h2>Let's stay in touch!</h2>
Please, feel free to <a href="https://t.me/efedoce">contact me</a> for any suggerence, correction or shared interest. Until I add the about page or, perhaps, a Contact page, please use the Telegram comments box at the bottom👇🏻 of the homepage or the notes.
Again, thank you very much for coming!

Latest notes

Using Tailwind + CSS Modules + SASS and Stylelint with Next.js

Welcome to Actionauta!