twpx

1.1.5 • Public • Published

Tailwind Plus X

example workflow npm version license

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

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.

Package Sidebar

Install

npm i twpx

Weekly Downloads

0

Version

1.1.5

License

MIT

Unpacked Size

10.9 kB

Total Files

4

Last publish

Collaborators

  • joshxfi