Creando un custom theme para react y tailwind

Creando un custom theme para react y tailwind

Hola amigos de la #nerdytud

Hoy les quiero comprtir un sencillo ejemplo paso a paso, para crear un theme propio para tailwind.

Creación del proyecto

npm init vite@latest front -- --template react

cd front

npm install

Instalación de tailwind

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Modificar tailwind.config.cjs

/** @type {import(tailwindcss).Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
    colors: () => ({
      verdes: {
        100: "#a9e159",
        200: "#89d631",
        300: "#72cb10",
        400: "#66c00b",
        500: "#5ab507"
      }
    })
  },
  plugins: [],
}

Agregar a index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Modificar app.jsx

const App = () => {
  return (
    <div className="bg-verdes-300">
      lorem ipsum
    </div>
  );
};

export default App;

Testear la aplicación

npm run dev

localhost:5173