Combine tailwindcss with CSS modules

Question

I installed tailwindcss following this tutorial: https://tailwindcss.com/docs/guides/create-react-app (using Craco instead of postcss). After I included every code snippet and reloaded the webpage, all the default CSS styles were gone (h1, flex, etc.) Is it because I didn't configure tailwindcss with the whole project right or it's normal to have all the default styling rules deleted and you have to specify the base. By configuring I mean you just need to add:

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

in index.css file only, not every .css component file.

Tailwind set it's own base styles. So you`ve done everything right. More information can be found here - tailwindcss.com/docs/preflight — Ihar Aliakseyenka
– Ihar Aliakseyenka, Commented Jan 18, 2021 at 21:56

Digvijay · Accepted Answer · 2021-01-19 03:43:55Z

2

Tailwind Preflight removes all of the default margins from elements like headings, blockquotes, paragraphs, etc.

@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;

If you would like to stick with default values, then you can disable Preflight

  // tailwind.config.js
  module.exports = {
    corePlugins: {
     preflight: false,
    }
  }

answered Jan 19, 2021 at 3:43

Digvijay

9,0453 gold badges44 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Combine tailwindcss with CSS modules

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related