Simple gallery with images from the pixabay API. Tailwind css is built into workflow with postcss and autoprefixer.
Add your Pixabay API KEY to .env go to free API Image Gallery.
- Clone the repository:
git clone https://github.com/AdarshTheki/pixabay-gallery-with-react-tailwind.git
- Navigate to the project directory:
cd image-gallery
- Install dependencies:
npm install
- Start the development server:
npm run start
- In the project directory, you can run:
npm i -D tailwindcss postcss-cli autoprefixer
npx tailwind init tailwind.js --full
- Create file postcss.config.js
// touch postcss.config.js
const tailwindcss = require("tailwindcss");
module.exports = {
plugins: [
tailwindcss("./tailwind.js"),
require("autoprefixer")
],
}
- Also create two file 'src/assets/main.css' & 'src/assets/tailwind.css'
# @import 'tailwindcss/base';
# @import 'tailwindcss/components';
# @import 'tailwindcss/utilities';
- In modify package.json
script:
"start": "npm run watch:css && react-scripts start",
"build": "npm run build:css && react-scripts build",
"test": "...",
"eject": "...",
"watch:css": "npx postcss src/assets/tailwind.css -o src/assets/main.css",
"build:css": "npx postcss src/assets/tailwind.css -o src/assets/main.css"
This can include guidelines for creating issues, submitting pull requests, and coding standards.
- Fork the repository.
- Create a new branch:
git checkout -b feature/your-feature-name
- Make changes and commit:
git commit -am 'Add some feature'
- Push to the branch:
git push origin feature/your-feature-name
- Create a pull request.
This project is licensed under the MTS License.
Adarsh Verma - contact