Global styles

[dsebastien]

Hello,

I've started using twin.macro recently, and have a bit of difficulty to wrap my head around some ideas.
I've added twin.macro to a Next.js application that was already configured to use Tailwind & scss files.

In that app, I had the following in _app.tsx:

import '../styles/tailwind.scss';
import '../styles/components.scss';
import '../styles/tailwind-utilities.scss';
import '../styles/fonts.scss';
import '../styles/styles.scss';

Where:

• tailwind.scss loads @tailwind base & @tailwind components
• components.scss loads specific component code (not really used so far)
• tailwind-utilities.scss loads @tailwind utilities
• fonts.scss loads the app's fonts
• styles.scss defines a set of global styles (e.g., for html, body, #__next) and utility classes like "full-page", which uses @apply and Tailwind:

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* no blue flashes */
}

html,
body,
body > div:first-child,
#__next {
  @apply min-w-full h-full min-h-full m-0 p-0 bg-gradient-to-b from-gray-100 to-gray-200 dark:from-gray-900 dark:to-black font-writerplan text-base font-normal;
  letter-spacing: -0.1px;
  /* Standard line height */
  /* Reference for line-height: https://dev.to/lampewebdev/css-line-height-jjp */
  line-height: 1.5;
}

.full-page {
  @apply h-full min-h-full w-full min-w-full;
}

.wp-button {
  @apply bg-purple-500 dark:bg-purple-400 hover:bg-purple-600 dark:hover:bg-purple-500 px-3 py-1 rounded-md font-medium text-sm text-purple-100 dark:text-gray-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-50 ease-in-out transition-all duration-300;
}

h1 {
  @apply text-3xl font-semibold #{!important};
}

Currently, I think that I'm in-between two different approaches: On one end I have the above setup which loads tailwind "in full", and on the other, I have added twin.macro's GlobalStyles, which probably does pretty much the same thing.

This works, but I'm wondering how to clean this up and avoid loading things twice needlessly. My hunch tells me that I should get rid of the scss files (almost?) entirely, but I don't really know how to convert what I have.

What would you recommend?

[ben-rogerson]

Hey there 👋

Yeah remove most of those scss files if you can and:

• Rely on GlobalStyles for the base tailwind styles.
• Use a custom Global styles provider to add global styles of your own.
• Adding custom font-face declarations in global styles is not recommended so use a .css file for that
• @apply can be converted to a reusable function in javascript

Cheers