https://github.com/turtlebeasts/tailwind-lesson

A collection of examples and exercises to learn and explore Tailwind CSS. Includes basic examples, responsive layouts, custom components, and advanced utility usage.
https://github.com/turtlebeasts/tailwind-lesson

javascript react reactjs tailwind tailwindcss

Last synced: 27 days ago
JSON representation

A collection of examples and exercises to learn and explore Tailwind CSS. Includes basic examples, responsive layouts, custom components, and advanced utility usage.

• Host: GitHub
• URL: https://github.com/turtlebeasts/tailwind-lesson
• Owner: turtlebeasts
• Created: 2024-09-08T21:19:06.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-08T21:41:41.000Z (2 months ago)
• Last Synced: 2024-09-30T09:42:25.263Z (about 1 month ago)
• Topics: javascript, react, reactjs, tailwind, tailwindcss
• Language: JavaScript
• Homepage: https://tailwind-lesson.netlify.app
• Size: 50.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tailwind CSS Learning Repository

Welcome to my Tailwind CSS learning repository! This project showcases various experiments, examples, and exercises as I learn and explore Tailwind CSS.

## Contents

- **Basic Examples:** Simple examples of Tailwind utility classes.

- **Layouts:** Different layout designs and responsive examples.

- **Components:** Custom components built using Tailwind CSS.

- **Utilities:** Advanced usage of Tailwind's utility classes.

- **Documentation:** Notes and tips on Tailwind CSS features and best practices.

## Getting Started

To get started with the examples and exercises in this repository, you can use the CDN for quick setup:

1. Clone the repository:

   `git clone https://github.com/your-username/tailwind-learning.git`

   

2. Open the HTML files in your browser to see the examples in action.

Alternatively, for more advanced usage, you can set up Tailwind CSS locally:

1. Install Tailwind CSS via npm:

   `npm install tailwindcss`

2. Create a `tailwind.config.js` file:

   `npx tailwindcss init`

3. Add Tailwind to your CSS file:

   `@tailwind base;`

   `@tailwind components;`

   `@tailwind utilities;`

4. Build your CSS with Tailwind:

   `npx tailwindcss build src/styles.css -o dist/styles.css`

5. Link the generated CSS file in your HTML.

## Resources

- [Tailwind CSS Documentation](https://tailwindcss.com/docs)

- [Tailwind CSS Play](https://play.tailwindcss.com/) - Experiment with Tailwind directly in your browser.

## Contributing

Feel free to fork the repository and contribute by adding more examples or improving existing ones. If you have any questions or suggestions, open an issue or submit a pull request.

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

Happy coding!