Me pregunto si hay una forma factible de implementar algo así. Digamos, quiero especificar relleno pero no quiero usar estilo en línea y quiero usar clases en su lugar. Pero tampoco quiero especificar todos los valores posibles en CSS.
Como escribo:
<Container className="p25 m10" />lo que se puede representar en las clases autogeneradas p25 y m10
<div class="p25 m10"/> /* Classes p25 and m10 are self-generated and have padding and margin */o incluso
<Container p=25, m=10 />convertido en el mismo o al menos en
<div style="padding: 25px; margin: 10px"/>No veo que haya una forma de generar automáticamente una clase css. Pero, esta es tu primera opción, son clases que representan algún tipo de estilo css puro, lo que puedes hacer es crear una clase como esta:
.p25 { padding: 25px; } <Container className="p25"/>Tu segunda opción, son accesorios que dentro del componente funcional, a través de alguna lógica, llevarás a cabo la implementación, por ejemplo:
export default function Container({p, m}) { return ( <div style={{padding: `${p}px`}, margin: `${m}px`}></div> ) }instale tailwind y configure las cosas del manual en el archivo de configuración.
module.exports = { theme: { extend: { spacing: { '25': '25px', } } } }entonces úsalo de esta manera
<div class="p-[25]"> <!-- ... --> </div>