# Contributing ๐Ÿ™Œ Howdy ๐Ÿ‘‹, fellow developer. In this document you'll learn how to contribute to this project ๐Ÿค“. There are 3 ways you can learn how to contribute to this repo. You can **watch** a quick video or **read** the steps. # Watch ๐Ÿฟ Want to watch a video instead? Click the link below to watch a quick **5 min.** video on how to contribute. [![Submit PR Video](https://cdn.devdojo.com/episode/images/September2020/hacktoberfest-2020.jpg)](https://devdojo.com/episode/hacktoberfest-2020) # Read ๐Ÿ“– **Create a Component** ๐Ÿ› ๏ธ- Visit the [Playground](https://devdojo.com/tailwindcss/playground) to create your TailwindCSS component. ![Create Component GIF](https://cdn.devdojo.com/tails/images/1-create-component-min.gif) **Fork This Repo** ๐Ÿด ![Fork Repo GIF](https://cdn.devdojo.com/tails/images/2-fork-repo-min.gif) **Download your Forked Repo** ๐Ÿ”ป ![Clone Repo GIF](https://cdn.devdojo.com/tails/images/3-clone-min.gif) **Add your Component** โž• ![New Component GIF](https://cdn.devdojo.com/tails/images/4-new-component-min.gif) **Push your Changes** ๐Ÿ‘Š ![Push GIF](https://cdn.devdojo.com/tails/images/5-push.gif) **Create your Pull Request** ๐Ÿค ![Create PR GIF](https://cdn.devdojo.com/tails/images/6-open-pr-min.gif) and then, ![Push GIF](https://cdn.devdojo.com/tails/images/boom.gif) Congratulations,๐ŸŽ‰ you just submitted your PR ๐Ÿค™ # More Details ๐Ÿ“– ## Pull Requests ๐Ÿค ### Creating a Pull Request ๐Ÿ‘จโ€๐Ÿ’ป If you would like to contribute to this project you can visit the [Playground](https://devdojo.com/tailwindcss/playground) and create your TailwindCSS component. After creating your component in the playground you'll want to clone the repo on your machine, add that component to a new `.html` file, and submit a Pull Request. (this process will be refined in a couple days). To request us to review code that you create, you will need to create a pull request as described in [this tutorial](https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github). ### File Location/Types ๐Ÿ“ ### [`components`](./components) All the TailwindCSS Components for the project are stored in `.html` files located within the [`components`](./components) directory. ### [`templates`](./templates) All the TaildwindCSS Templates for the project are stored in `.html` files located within the [`templates`](./templates) directory. ## Issue Creation ๐Ÿคจ In the event that you have an issue using the tool or have a suggestion for a change but don't want to contribute code, we are more than happy to help. Make sure that when you create your issue, it follows the format for the type of issue you select (it has individual templates for each issue type). Issue template types include the following: - Bug Reporting - Feature Requests - Help Requests ## Style Guide ๐ŸŽจ ### Components ๐Ÿ”ง For components you don't need to add ``, `` or `` elements. We provide that on the back-end. ### Templates For templates we do not provide any wrapping code like we do for components. As our components though, we do expect them to contain TailwindCSS like our components. Here's a little snippet taken from our current templates. #### TailwindCSS Link Snippet ```html ``` ### TailwindCSS All our components and templates rely on TailwindCSS. Components work of our provided TailwindCSS version. Templates have a hard-coded version included in each template, as shown in [the above snippet](#tailwindcss-link-snippet). ### Editorconfig Tails has an [`.editorconfig`](./.editorconfig) to ease the building of both components and templates. For indenting we prefer `space` over `tab`, 4 spaces for `.html` and 2 for other files. ## Naming Conventions ๐Ÿ“‹ ### Components ๐Ÿ”ง When naming your component file, it's best to stick with a descriptive name. Such as for a component with featured content containing a large image, we named the file `feature-content-image.html`. ### Templates TBD.