devstack06 / memes-maker

Made using ReactJS , tailwind css and imgflip API to generate memes

This project was bootstrapped with Create React App.

Added the dark mode theme

ScreenShot:

STEP-WISE INSTALLING TAILWIND CSS IN REACT JS:

1. npm install tailwindcss


2. npx tailwindcss init(It will create tailwind.config.js)


3. Make a file postcss.config.js and add,

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



4. npm add postcss-cli (check the package.json for updates in dependencies)


5. npm install [email protected] (compatible with "tailwindcss": "1.8.10")


6. In the src/index.css file add:
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   


7. In the package.json file, add the scripts as: "scripts": {
   "build:css": "postcss src/index.css -o src/tailwind.css",
   "watch:css": "postcss src/index.css -o src/tailwind.css -w",
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
   }


8. In src/App.js add
   import './tailwind.css';
9. In the src/index.js also add:
   import './index.css';
   import App from './App';
   (Although they are already included still, confirm it so as to reflect the tailwind css effects of our components.)


10. npm run build:css (It will create the tailwind.css file in src)


11. npm start