13. PostCSS Import

If you see src/css/index.css, I have defined a lot of custom css to un-reset the tailwind preflight.

And its a mess. I want this custom css to be moved into its own separate file and make this one a bit cleaner.

This is being done for the next step we are going to implement in our blog i.e. Theming with tailwind

Cleanup

To clean it up, I've moved the custom css to a new file src/css/unreset.css.
So now content of src/css/index.css looks like below:

@tailwind base;
@tailwind components;
@tailwind utilities;

Install

Next I tried importing the new css back in src/css/index.css as below, but it didn't work:

@import 'unreset.css';

To make @import work, I had to install postcss-import

npm install postcss-import

this is PostCSS plugin to transform @import rules by inlining content.

Configure

Lets configure this plugin to run before tailwind in postcss.config.js so that tailwind can find all the content inline.

module.exports = () => ({
  plugins: [
    require("postcss-import"), 
    require("tailwindcss")
  ],
});

Use @import for all

Now change src/css/index.css file

from

@tailwind base;
@import 'unreset.css';
@tailwind components;
@tailwind utilities;

to

@import "tailwindcss/base";
@import 'unreset.css';
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Now the css looks a much cleaner.

Thats it for this note.

---

This GitHub commit represents what we've done in this post 🤩