Tailwindify

HTML Components built using TailwindCSS and Parcel

Built With

• TailwindCSS
• ParcelJS

Table of Components

• Usage
  • Install Dependencies
  • Build Components
  • Update Components and Watch
• How it works
• List of Component Categories
• How to add new component
• Contribution
• License
• Contact Information

File Structure

  ├── src/
        ├──components             contains components respective folder with markup and styles
            ├──COMPONENT A        components folder where all components with their respective folders are present
                ├──index.html     component A markup file
                ├──style.scss     component A style file (Optional)
                ├──preview.md     component screenshot preview on folder access
                ├──preview.png    component design preview image
            ├──COMPONENT B              
                ├──index.html     
                ├──style.scss
            ├──COMPONENT B VARIATION      
                ├──index.html     
                ├──style.scss
            ....
            ....
            ....
            ....
            ├──COMPONENT X              
                ├──index.html     
                ├──style.scss
        ├──style.scss             Main page styles
        ├──index.html             Main page of the website
  ├── dist/  Optimized components with respective folders (Available after `yarn build`)

Usage

Install Dependencies

yarn install

Build Components

yarn build

Update Components and Watch

yarn serve

The local dev server on serve can be accessed through port 8989 i.e., localhost:8989

How it works

• Each component is present in it's respective folder eg: components/alert,components/notification,components/card etc

• Optional SCSS file is added and linked directly within HTML using link attribute which will be compiled by parcel.

  <link rel="stylesheet" href="style.scss">

  Note: Tailwind Styles are required for each respective component style (SCSS) file if you are planning on using tailwind in using @apply directive

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  
  // Other styles here using @apply for extracting tailwind classes to each class

• Once the command yarn build is run, the output files will be present on dist folder with the same component structure.

List of Component Categories

• Alert
• Card
• Navigation
• Notification
• CTA

and more..

How to add new component

1. Go to src/components directory. Duplicate the template folder into components with the component name
2. Update the title in index.html and contents within <!-- Component start --> <!-- Component End --> lines.
3. Remove default style.scss and unlink the file if not used in the index.html
4. Take a Screenshot of the result and replace the preview.png within the component folder.

Contribution

Glad to see you are interested in improving this repository. Please read the contributing guidelines here

License

By contributing, you agree that your contributions will be licensed under its MIT License.

Contact Information

• Email: [email protected]
• Twitter: https://twitter.com/manjumjn
• Website: https://manjumjn.com