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