Snippet for adding tailwind inline to load the ui with styles the first time itself

[Mihir-Karbelkar]

Hi Everyone. I use tailwind with next to build components but the issue I have had is with the first render with just a white document being shown if the css doesnt load in time or slight flash. To fix this I thought of writing a component for inline styles so the document itself will have the correct styles the first time it is loaded, thus contributing to a better UX.

import React from 'react';
import fs from 'fs';
import path from 'path';

const findStyles = (directoryPath: string) => {
  const filesNames = fs.readdirSync(directoryPath);
  const cssFiles = [];
  for (const fileName of filesNames) {
    const filePath = path.join(directoryPath, fileName);
    const fileStat = fs.statSync(filePath);
    if (fileStat.isFile()) {
      const fileExtension = path.extname(fileName);
      if (fileExtension === '.css') {
        cssFiles.push(filePath);
      }
      continue;
    }
  }
  return cssFiles;
};
function InlineStyleTailwind() {
  const cssPath = path.join(
    __dirname,
    '../../',
    'static',
    'css',
    process.env.NODE_ENV === 'production' ? '.' : 'app'
  );
  const files = findStyles(cssPath);
  return files.map((file, index) => (
    <style
      key={`${index}`}
      dangerouslySetInnerHTML={{
        __html: fs.readFileSync(file, 'utf-8'),
      }}
    />
  ));
}

export default InlineStyleTailwind;

This is for anyone wanting to achieve the same with tailwind. I would also like to have feedback on how I can improve this better because right now it will create style tag for all css files inside the directory, which is not what you need always.
The important thing is that this goes in to the root layout.