Introduction & Installation to Tailwind CSSโก
A Thread ๐งตโ
A Thread ๐งตโ
๐ก Tailwind CSS?
โ Tailwind CSS is a utility-first CSS framework, it provides low-level utility classes to build custom web pages.
โ Utility classes are the name of the class according to their purpose such that a developer can easily understand.
โ Tailwind CSS is a utility-first CSS framework, it provides low-level utility classes to build custom web pages.
โ Utility classes are the name of the class according to their purpose such that a developer can easily understand.
โ Like: ๐ฏ๐ด-๐ฟ๐ฒ๐ฑ-๐ฑ๐ฌ๐ฌ is the name of the utility class.
- The primary purpose of the ๐ฏ๐ด-๐ฟ๐ฒ๐ฑ-๐ฑ๐ฌ๐ฌ class is to add a background color of red, and many more utility classes are available in the Tailwind CSS.
- The primary purpose of the ๐ฏ๐ด-๐ฟ๐ฒ๐ฑ-๐ฑ๐ฌ๐ฌ class is to add a background color of red, and many more utility classes are available in the Tailwind CSS.
โ We do not need to leave the HTML file for designing the web page.
โ That's why if we want to build a web page the fastest and the easiest way then we should give a try to Tailwind CSS.
โ That's why if we want to build a web page the fastest and the easiest way then we should give a try to Tailwind CSS.
๐ก Installation of Tailwind CSS using CLI?
โ You can install it by following these steps, but you can be stuck during installing it.
โ So you should follow these key points during installing Tailwind CSS into your machine.
tailwindcss.com
โ You can install it by following these steps, but you can be stuck during installing it.
โ So you should follow these key points during installing Tailwind CSS into your machine.
tailwindcss.com
โ First of all, we have to install node JS into our system then we will be able to install Tailwind CSS.
1๏ธโฃ Open a folder in VS Code and run the "npm init -y" command in the VS Code terminal.
1๏ธโฃ Open a folder in VS Code and run the "npm init -y" command in the VS Code terminal.
2๏ธโฃ Create 2 folders in that project folder, I've also created 2 folders named "src" and "public" inside that existing folder.
โ Now we have to create some files in both folders.
โ The "public" folder has 2 files that are "index.html" and "output.css"
โ Now we have to create some files in both folders.
โ The "public" folder has 2 files that are "index.html" and "output.css"
โ And the "src" folder has only one file that is "input.css"
3๏ธโฃ Now we have to download Tailwind CSS using "npm install -D tailwindcss" command.
4๏ธโฃ Then we have to create a config file using the "npx tailwindcss init" command.
3๏ธโฃ Now we have to download Tailwind CSS using "npm install -D tailwindcss" command.
4๏ธโฃ Then we have to create a config file using the "npx tailwindcss init" command.
5๏ธโฃ Now we have to add the path as the value of the content property inside the "tailwind.config.js" file.
๐ฐ๐ผ๐ป๐๐ฒ๐ป๐: ["./๐๐ฟ๐ฐ/*/.{๐ต๐๐บ๐น,๐ท๐}"],
๐ก One thing kept in mind is that we have to specify the actual path of the" index.html" or " .js " files.
๐ฐ๐ผ๐ป๐๐ฒ๐ป๐: ["./๐๐ฟ๐ฐ/*/.{๐ต๐๐บ๐น,๐ท๐}"],
๐ก One thing kept in mind is that we have to specify the actual path of the" index.html" or " .js " files.
โ My index.html file is kept inside the public folder that's why I have to change path "src" to the "public" in the "tailwind.config.js" file.
โ Both are must be the same otherwise it does not work.
โ Both are must be the same otherwise it does not work.
6๏ธโฃ Then we have to add these lines of code into a CSS file that is kept inside the src folder.
@๐๐ฎ๐ถ๐น๐๐ถ๐ป๐ฑ ๐ฏ๐ฎ๐๐ฒ;
@๐๐ฎ๐ถ๐น๐๐ถ๐ป๐ฑ ๐ฐ๐ผ๐บ๐ฝ๐ผ๐ป๐ฒ๐ป๐๐;
@๐๐ฎ๐ถ๐น๐๐ถ๐ป๐ฑ ๐๐๐ถ๐น๐ถ๐๐ถ๐ฒ๐;
โ In my case, these lines of code are kept inside the input.css file(src f).
@๐๐ฎ๐ถ๐น๐๐ถ๐ป๐ฑ ๐ฏ๐ฎ๐๐ฒ;
@๐๐ฎ๐ถ๐น๐๐ถ๐ป๐ฑ ๐ฐ๐ผ๐บ๐ฝ๐ผ๐ป๐ฒ๐ป๐๐;
@๐๐ฎ๐ถ๐น๐๐ถ๐ป๐ฑ ๐๐๐ถ๐น๐ถ๐๐ถ๐ฒ๐;
โ In my case, these lines of code are kept inside the input.css file(src f).
7๏ธโฃ Now we have to write our code into the "index.html" file and the "output.css" file will be linked to it.
8๏ธโฃ Finally, we have to run "npx tailwindcss -i ./src/input.css -o ./public/output.css --watch" command into the terminal.
โ It's a path of those files that are kept inside both folders.
โ It's a path of those files that are kept inside both folders.
โ The output.css file is kept inside the public folder and the input.css file is kept inside the src folder.
โ After running this command Tailwind CSS is installed successfully into your machine.
๐ Finale file structure:
โ After running this command Tailwind CSS is installed successfully into your machine.
๐ Finale file structure:
๐ One more thing, you can download this VS Code extension for the code suggestion.
๐ Tailwind CSS IntelliSense:-
marketplace.visualstudio.com
๐ Tailwind CSS IntelliSense:-
marketplace.visualstudio.com
That's all for now, we will meet in the next thread๐
๐ Follow Me @ATechAjay
For:
๐ Web Development
โจ JavaScript
๐ Writing Skill
๐ฅ Motivation
๐น Growth
โ But Not For Only Resources & Shitpost ๐
Thank you so much for staying to the end of this thread๐
๐ Follow Me @ATechAjay
For:
๐ Web Development
โจ JavaScript
๐ Writing Skill
๐ฅ Motivation
๐น Growth
โ But Not For Only Resources & Shitpost ๐
Thank you so much for staying to the end of this thread๐
Loading suggestions...