Tailwind Plus X

A template generator that automatically configures the latest Tailwind CSS version for you. Vite is used for most of the templates. See available templates below.

Installation

NOTE: If you are using npm to install a template, make sure to have v7.x (do npm -v to check version)

• Go to the directory where you want to store your project:

$ cd <your_directory>

• Running the command below will walk you through an interactive installation process:

$ npx twpx

• You can also directly generate by doing:

# NOTE: to use npm, remove the yarn flag
$ npx twpx <project_name> --template <template> --yarn

# shorthand version:
$ npx twpx <project_name> -t <template> -y

# eg:
$ npx twpx my-project -t vanilla

NOTE: Some terminals like git bash will not work with the interactive installation, use the direct installation instead.

How It Works

• For example, you named your project hello-world with react-ts template and yarn. The generator will execute:

$ yarn create vite hello-world --template react-ts
$ cd hello-world
$ yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

• A script is then executed to replace the content of the main css file with tailwindcss directives:

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

Templates Available

| Templates | TypeScript Templates | | --- | --- | | vanilla | vanilla-ts | | react | react-ts | | preact | preact-ts | | next | next-ts |

Contributing

• Report bugs or feature requests.
• Submit your pull request on the dev branch.

To test locally, run:

$ cd <your_cloned_fork>

# then
$ ts-node main

# or
$ yarn build
$ node lib/main

License

This repository is licensed under the MIT License.