<repo_name>ohadosnat/tailwind-collection<file_sep>/README.md
# Tailwind Collection
This repository contains all of my projects using only Tailwind CSS for practice purposes. <br>
The designs I used are all made by myself a while ago for the **"Daily UI"** Challange, using `Figma` and `Sketch`. <br>
You can view it [here](https://ohadosnat.github.io/tailwind-collection/pages/index.html) (Main page with links to all the projects).
### **The Projects:**
- [**Movie App**](https://ohadosnat.github.io/tailwind-collection/pages/movie.html) - The design was originally made as a TV App but I used it anyway since I like the layout.
- [**Subscribe Form**](https://ohadosnat.github.io/tailwind-collection/pages/subscribe.html) - A simple newsletter form with a unique design, fun and challenging.
- [**Car Music Interface**](https://ohadosnat.github.io/tailwind-collection/pages/car-music.html) - a Car Interface Design that I did.
- [**Product Page**](https://ohadosnat.github.io/tailwind-collection/pages/product.html) - This was my first Tailwind CSS project, It was on a different repository but I decided to move it to this one to keep all of my project in one place.
---
***As always, If you got any suggestions/feedback/tips about my code. Feel free to reach out and help me learn!*** :smile:
<br><br>
That's all for today! See you next time! <br>
<file_sep>/tailwind.config.js
module.exports = {
  purge: ['./pages/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      zIndex: {
        '-1': '-1',
      },
      fontFamily: {
        'roboto': ['Roboto, sans-serif']
      },
      gridTemplateColumns: {
        // Main Grid config - min-content
        'main': "min-content 1fr min-content",
      },
      gridTemplateRows: {
        // Main Grid config - min-content
        'main': "min-content auto min-content",
      },
      backgroundImage: theme => ({
        'awaken-mob': "url('../img/music/img_awaken-my-love-mob.jpg')",
        'bladerunner': "url('../img/movie/img_blade-runner.jpg')",
        'bladerunner-mob': "url('../img/movie/img_blade-runner-mob.jpg')",
        'ladyonfire': "url('../img/movie/img_PortraitofaLadyonFire.jpg')",
        'soundofmetal': "url('../img/movie/img_sound-of-metal.jpg')",
        'minari': "url('../img/movie/img_minari.jpg')",
        'burning': "url('../img/movie/img_burning.jpg')",
        '1917': "url('../img/movie/img_1917.jpg')",
        'uncutgems': "url('../img/movie/img_uncut-gems.jpg')",
        'prd-circle': "url('../img/product/bg_circle-1.svg')",
        'prd-circle-2': "url('../img/product/bg_circle-2.svg')",
      }),
      colors: {
        form: {
          bg: "#FFF75E",
          btn: "#41E9EA",
        },
        prd: {
          main: "#C975B1",
          dark: "#9E5188",
        }
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
