My personal documentation and learning for tailwind css.

tailwind_css.txt

Docs: https://tailwindcss.com/docs/installation
Youtube: https://www.youtube.com/watch?v=h9Zun41-Ozc
----------setting up our project-------
Make your project directory. add a folder, add index.html and tailwind.css in it.       `tcss/layout/index.html+tailwind.css`
Run: npm init -y {for packages.json} 

---------install tailwindcss--------------------------

Run: npm install -D tailwindcss  (to install tailwindcss as devDependencies)
Run: npx tailwindcss init        (to initilise tailwind and make tailwind.config.js)(can be built mannually too)

---------configure paths--------------------------------

Add: in tailwind.config.js/content `./layout/*.html` only the filetype need to be mention, * means all.

--------Add the Tailwind directives to your CSS----------

make input file and custome css file  `tcss/tailwind.css` 
paste: @tailwind base; @tailwind components; @tailwind utilities; in tailwind.css

-------Start the Tailwind CLI build process-----------

create a output css file. `layout/css/styles.css` , link index.html to it. 
Run:  `npx tailwindcss -i inputFile -o outputFile --watch` `npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch`

-----Adding plugin---------------------
Run:  `npm install "@tailwindcss/pluginName"`     use gitbash here for installing
Including: in tailwind.config.js/plugin  `require('@tailwindcss/typography'),`

-----optimiszing--------
Adding script in packge.json 
Add:  "dev":"npx tailwindcss -i tailwind.css -o ./layout/css/styles.css --watch"
Add:  "prod": "npx tailwindcss -i tailwind.css -o ./layout/css/styles.css --minify"


------------post css harry
make folder tcsspost/index.html
run: npm init -y
run: npm install -D tailwindcss postcss autoprefixer vite
run: npx tailwindcss init -p
add: tailwind.config.js/content["*"]
Add: in packges.json  "server":"vite"

tailwindCss.txt

[]YTB           https://www.youtube.com/watch?v=h9Zun41-Ozc
[]Tail DOCS     https://tailwindcss.com/docs/installation

================TailwindCss CLI==============================


[][]            Make your project folder.
[]folder/       Create a subfolder (here is "layout")
[]/file         Create a file inside layout/index.html
[]paste         <script src="https://cdn.tailwindcss.com"></script> (paste in your head of index.html)
[]cmd           npm init -y (so that we have a packages.json file)
[]cmd           npm install -D tailwindcss ( to install tailwindcss as devDependencies)
[]cmd           npx tailwindcss init (create tailwind.config.js file)(you can add it manually)
[]Add           add the paths of your files in which you use styles so that tailwind know where it has to do work.Path are added in                            tailwind.config.js file in content line. (for here, ./layout/*.html )
[]Add           Create a input Css file. (for here it is in working directory  tailwind.css )(Every personaliesation is added here)
[]paste         @tailwind base; @tailwind components; @tailwind utilities; in tailwind.css 
[]folder        make a output css file (for here, in layout/css/styles.css )
[]link          link styles.css to  in your head index.html
[]cmd           npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch (forhere, npx tailwindcss -i tailwind.css -o                           ./layout/css/styles.css --watch (npx tailwindcss -inptutflag inputsrc -outputflag --watchflagforupdatingwithchanges

----------------INSTALLING PLUGINGS-------------

[]cmd           npm install "@tailwindcss/pluginname" (if error occurs  , use gitbash from same root directory to install)
[]paste         require('@tailwindcss/typography'), in tailwind.config.js/plugins
[]paste         "dev":"npx tailwindss -i tailwind.css -o ./layout/css/styles.css --watch" in packages.json/script
[]cmd           npm run dev

----------------ADDING CUSTOM CSS---------------

[]write         in tailwind.css (input) 
                @layer components {
                  .bg-primary {
                    @apply bg-gradient-to-br from-purple-500 to-pink-500;
                  }
                    } 
----------------PRODUCTION-----------------------

[]paste         "prod":"npx tailwindcss -i tailwind.css -o ./layout/css/styles.css --minify"  in packages.json/script
[]cmd           npm run prod

================INSTALLING THROUGH POSTCSS METHOD==========================
[]folder        make your project folder
[]              Repeat step 8,9,11
[]cmd           npm install -D tailwindcss postcss-cli autoprefixer
[]cmd           npx tailwindcss init -p (to create tailwind.config.js and postcss.config.js)
[]Add           add the paths of your files in which you use styles so that tailwind know where it has to do work.Path are added in                            tailwind.config.js file in content line. (for here, ./layout/*.html )[./layout/*.html]   
[]Add           Create a input Css file. (for here it is in working directory  tailwind.css (main.css file in docs)(Every                               personaliesation is added here)

[]write         in tailwind.css (input) 
                @layer components {
                  .bg-primary {
                    @apply bg-gradient-to-br from-purple-500 to-pink-500;
                  }
                    }