Skip to content

subhroster/tailwind-cli

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Tailwind Setup CLI

A command line tool for setting up Tailwind CSS with Prettier integration for automatic class sorting.

Installation

To install the package globally, run:

npm install -g tailwind-setup-cli

Usage

After installing the package, you can set up Tailwind CSS by running:

tailwind-setup-cli

Configuration Options

During the setup process, you will be prompted to enter the following:

  1. CSS File Name: Specify the name of your CSS file (default: styles.css).
  2. HTML File Name: Specify the name of your HTML file (default: index.html).

Additional Features

You will also be prompted for the following integrations:

  • Integrate Prettier: Integrate Prettier with automatic sorting of class names.
  • Integrate ESLint: Integrate ESLint for linting your code.
  • Include Accessibility Features: Include recommendations for accessibility in your HTML files.
  • Automate CSS Build: Set up automated CSS build processes.

Commands

After the setup, you can use the following commands:

  • Build CSS: npm run build:css

  • Watch for changes in CSS: npm run watch:css

Prettier Class Sorting Troubleshooting

To set up Prettier with automatic sorting of Tailwind CSS classes, follow these steps:

  1. Ensure you have the Prettier and the Tailwind CSS plugin installed. The setup script does this automatically if you choose to integrate Prettier.

  2. Create a .prettierrc file in your project root with the following content: { "plugins": ["prettier-plugin-tailwindcss"], "singleQuote": true, "trailingComma": "es5" }

  3. If you encounter any issues with class sorting, make sure your Prettier version is compatible with the plugin: npm install --save-dev prettier prettier-plugin-tailwindcss

  4. If you're using VS Code, ensure the Prettier extension is installed. You can configure VS Code to format your files on save. Add the following to your settings.json:

   {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode"
   }

Troubleshooting

If you encounter issues during setup:

  • Failed to execute command: Ensure you have the necessary permissions to run commands and that you have Node.js and npm installed.
  • Missing Tailwind CSS file: Check that the CSS file path is correct and that the file was created during setup.
  • Class sorting not working: Make sure that the Prettier plugin for Tailwind CSS is installed and configured correctly.

License

ISC License

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published