Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joshxfi/tailwind-plus-x
A generator for a variety of templates with Tailwind CSS configuration.
https://github.com/joshxfi/tailwind-plus-x
generator npm tailwind template
Last synced: 2 months ago
JSON representation
A generator for a variety of templates with Tailwind CSS configuration.
- Host: GitHub
- URL: https://github.com/joshxfi/tailwind-plus-x
- Owner: joshxfi
- License: mit
- Created: 2021-09-04T04:23:23.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-29T03:06:43.000Z (about 2 years ago)
- Last Synced: 2024-10-12T07:05:30.788Z (3 months ago)
- Topics: generator, npm, tailwind, template
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/twpx
- Size: 114 KB
- Stars: 13
- Watchers: 1
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwind Plus X
[](https://badge.fury.io/js/twpx)
A template generator that automatically configures the latest [`Tailwind CSS`](https://github.com/tailwindlabs/tailwindcss) version for you. [`Vite`](https://github.com/vitejs/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:
```sh
$ cd
```
- Running the command below will walk you through an interactive installation process:
```sh
$ npx twpx
```
- You can also directly generate by doing:
```sh
# NOTE: to use npm, remove the yarn flag
$ npx twpx --template --yarn
# shorthand version:
$ npx twpx -t -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:
```js
$ 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:
```ruby
@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.](https://github.com/joshxfi/tailwind-plus-x/issues)
- Submit your pull request on the `dev` branch.
To test locally, run:
```sh
$ cd
# then
$ ts-node main
# or
$ yarn build
$ node lib/main
```
## License
This [repository](https://github.com/joshxfi/tailwind-plus-x) is licensed under the [MIT License.](https://github.com/joshxfi/tailwind-plus-x/blob/main/LICENSE)