Generando un template de ReactJS con TailwindCSS

Hola amigos de la #nerdytud

Hoy les comparto una forma, de las tantas existentes, para generar un template de ReactJS y TailwinCSS, en muy pocos pasos

Creación de la aplicación

npx create-react-app dummy

Instalación de Tailwind y dependencias

cd dummy

npm i tailwindcss 
npm i postcss 
npm i autoprefixer 
npm i postcss-cli -D

Creación de output.css y tailwind.css

Desde la raíz del proyecto, crear una carpeta denominada src/styles y dentro de la misma, creamos los dos archivos css En tailwind.css, agregamos el siguiente código

@tailwind base;

@tailwind components;

@tailwind utilities;

Creación archivos de configuración

npx tailwindcss init --full

npx tailwindcss init tailwindcss-config.js -p

Modificación de tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],

Modificación de postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

Modificación de package.json

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch:css": "postcss src/styles/tailwind.css -o src/styles/output.css"
  },

Testear aplicaión

npm start

Modificación de App.js

import './styles/output.css'

function App() {
  return (
    <div className="App">
      <button class="inline-block px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-indigo-500 rounded-md cursor-pointer hover:bg-indigo-600">Tailwind Button</button>
    </div>
  );
}

export default App;

Probar la aplicación

npm start

http://localhost:3000