Swap-Nova / Tailwind-CSS_Features

Building a feature Section that is often used in landing pages around the internet. To build this component used Flexbox, borders and hover states and possibly some utility classes.

Goal of the Project:

• Use borders and box-shadow utility classes.
• Working of hover modifier in Tailwind CSS.
• Build a simple web page with flexbox utility classes.

Additional Goal:

• Hosting through the Firebase platform

Setting up the workplace:

npm -y init

• Now, we will install the tailwind CLI tool as a devDependency, which means that the Tailwind CLI tool is a package only required during the development. Enter the following command in your terminal.

npm install -D tailwindcss

• The terminal will load the installation of the packages. Now, open your package.json file and check that 'tailwindcss' appears as a devDependency, which you should find in lines 12 and 13.
• Now that the Tailwind CLI tool is installed, we can run it by entering the following command in your terminal.

npx tailwindcss init

• In the tailwind.config.js file, update the “content” property in line 3 with the following code:

content: ["./src/**/*.{html,js}"],

• Finally, enter the following code in the input.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

• How to start Tailwind: We need to build the utility classes using the Tailwind CLI Tool. Open the terminal and enter the following command:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

PS: The terminal will now rebuild only the utility classes used in your code every time you save new changes. Thereafter, leave your terminal open during your development.