Tailwind CSS Testing

Description

A modern project utilizing Tailwind CSS with a Prettier plugin for Tailwind to ensure well-structured and optimized styling. This project demonstrates the integration of Tailwind CSS into a development workflow with real-time changes and prettier formatting.

Installation Instructions

1. Clone the repository:

git clone https://github.com/CFMVCarlos/TailwindCSS-Testing.git
cd TailwindCSS-Testing

2. Install Prettier with Tailwind CSS plugin:

npm install

Usage Guide

1. Create the required configuration files:

a. Prettier configuration (prettier.config.js):

module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
};

b. Tailwind CSS configuration (tailwind.config.js):

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
};

2. Build Tailwind CSS:

Run the following command to build your Tailwind CSS file:

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

3. View the project:

Open your browser and navigate to localhost to see the project in action.

Additional Resources

• Tailwind CSS Documentation
• Prettier Documentation

Author

• Carlos Valente