This repository hosts the codebase for Acme Rockets, a simple static website implementing Tailwind CSS and following CSS best practices. The website is deployed on render.com and can be accessed at https://a-rockets.onrender.com .

• Initialize a project with npm.

npm init -y

• Install Tailwind CSS as a dev dependency.

npm install -D tailwindcss@latest

• Initialize a project with Tailwind CSS and create your 'tailwind.config.js'.

npx tailwindcss init

• Modify the tailwind.config.js file to include the paths of your CSS and JS files in the "content" property:

content
: 
[
"./build/*.html"
,
 "./build/js/*.js"
]
,

• Add the Tailwind directives to your CSS file. Create an 'input.css' file in the 'src' folder and include the following directives:.

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

In some cases, you might encounter the error "unknown at-rule @tailwind" in VSCode. To resolve this, either modify the VSCode settings to avoid errors for future projects or add a '.vscode/settings.json' file with the following code ( https://stackoverflow.com/questions/65247279/unknown-at-rule-tailwind-cssunknownatrules ):

{
  
"files.associations"
: {
    
"*.css"
: 
"
tailwindcss
"

  }
}

• Add a script in the 'package.json' to compile the CSS file. Run the command "npm run tailwind" in a dedicated terminal to generate the CSS file in the 'build/css' folder:

"tailwind"
: 
"
npx tailwindcss -i ./src/input.css -o ./build/css/style.css --watch
"

1. Class names, logic and using Emmet to speed up the process.
2. Responsive design - breakpoints - media queries.
3. Light & Dark mode depending on the user's preferences.
4. Hamburger menu with Html symbols or Pseudo elements (before, after) for better accessibility and animation.
5. Custom classes & arbitrary values + extend and override tailwind classes with custom classes (see tailwind.config.js).
6. Css config for sections full height depending on the viewport !!
7. Prettier plugin for tailwindcss. (npm install -D prettier-plugin-tailwindcss)
8. Deployement on render.com ( https://a-rockets.onrender.com ).