Learnt and applied new concept in styling of application. Helpful to migrate Next JS applications using styled-components into tailwind quickly

Get equivalent Tailwind CSS from styled-components using online tools like https://transform.tools/css-to-tailwind

Now we can use this in globals.css and start using it but it becomes complex as the project grows when we add more styles instead we can define these in new file.

Define a new CSS file in NextJS project and add the tailwind CSS received in the previous step

@media only Screen and (max-width: 64em) {
    .navbar_header {
        @apply px-12 py-2;
    }
}

Create a main.css file and import all existing tailwind layers and CSS files including globals.css and newly created file

@import 'tailwindcss/base'; 
@import './globals.css'; 
@import 'tailwindcss/components'; 
@import 'tailwindcss/utilities'; 
@import './components/styledtailwind.css';

Use 'postcss-import' preprocessor, ensure to add this as first plugin in postcss.config.js

import main.css in layout.tsx file

Now we can see all the styles from styledtailwind css being applied. This makes the styling more modularized and easy to extend.

If need arises we can define another css file and just import that in main.css all components can then access these new styles without modification.