Pra quê Tailwind, se eu posso criar meu próprio CSS Generator do zero.

Chega de usar Tailwind!

Entenda o seguinte, CSS Funcional já existem há tempos...

Conceituando, CSS Funcional é uma técnica que visa o reuso de código css. Essa técnica consiste em trazer pequenos trechos de classes com seletores pré atribuidos. Assim, voce tem uma facilidade maior em trabalhar.

Exemplo.

.bg-red { background-color: red };
.pb-20 { padding-bottom: 20px };

Eu tenho uma classe utilitária que ao utilizar ela no meu elemento, ele vai herdar os comportamentos de estilo dela.

Assim eu consigo crescer meu código HTML e de forma mais rápido.

O legal é que é muito semantico e voce as vezes nem precisa conhecer todas a classes. Se voce configurar por exemplo, de 4 em 4 pixels, magicamente voce vai entender que pb-24 significa padding-bottom: 24px.

O resultado seria:

  <div class="pb-24 bg-red">

Vamos criar nossa propria ferramenta pra gerar o CSS Funcional e de forma inteligente?

Vamos la.

Crie um projeto chamado meucss. Dentro dele instale as seguintes dependencias de desenvolvimento:

npm i typescript @types/node --save-dev

Crie um arquivo chamando meucss.config.ts (em formato de objeto mesmo).

Esse arquivo será responsável por ter todas a classes que configurarmos para trabalhar e, no processo de buid, vai gerar somente esse css que você especificou.

// meucss.config.ts

export const meuCSSConfig = {
  classes: {
    "flexd-row": "row", // flex direction row
    "flexd-column": "column", // flex direction column
    "flexa-center": "align-center" // flex align center
    "px-20": "20px", // padding horizontal
    "mr-29": "29px", // margin right
  },
}

Veja que eu informei algumas classes de utilização. Só pra gente brincar. Agora vamos utilizar isso em um projeto.

Vou criar o nosso tema global, pra gente poder utilizar essas classes de forma inteligente no nosso código.

import { meuCSSConfig } from "./meucss.config";

export function theme(props: typeof meuCSSConfig[]) {
  const clearClasses = new Set(...props)
  return [...clearClasses].join(" ");
}

Veja ele sendo aplicado em um projeto React.

import React from "react";
import styles from "./styles";

import { Flex } from "./button-group";

const MyComponent = () => {
  return (
    <div>
      {/* this is a declarative styled component */}
      <Flex moreOptions={["flexd-column", "flexa-center"]}>
        <div className={} />
      </Flex>
    </div>
  );
};

Vejam como ficou ótimo nosso código inteligente. Aplicado na prática

Agora vamos tentar chegar na ideia de um conversor desse objeto, para gerar nosso arquivo .css dessas nossas configurações.

Eu deixarei somente um gostinho de como pode ser e espero que voces evoluam o código, tudo bem?

// geradorDoCss.ts
import { meuCSSConfig } from "./meucss.config";
import * as fs from 'fs';

export function convertToCSS(config: typeof meuCSSConfig): string {
  let cssRules = '';

  const classes  = config.classes

  for (const className in classes) {
    const cssValue = className;
    const cssRule = `.${className} { ${cssValue} }\n`;
    cssRules += cssRule;
  }



  fs.writeFile('styles.css', cssRules, (err) => {
    if (err) {
      console.error('Erro ao escrever o arquivo styles.css:', err);
      return;
    }
    console.log('Arquivo styles.css gerado com sucesso!');
  });

  return cssRules;
}

Vamos testar?

// test.ts

import { convertToCSS } from "./convertToCSS";
import { meuCSSConfig } from "./meucss.config";

convertToCSS(meuCSSConfig)

Codigo semi completo