Setting up Tailwind CSS with frontend frameworks like React, Next.js, Vue etc. is straight forward as they come with postcss pre-processor out-of-the-box. But kick starting a dev setup with vanilla HTML and JS is pretty hard.
This starter project leverages the power of Vite to setup a smooth Tailwind CSS dev experience.
- Clone the repository (Alternately you can download the zip file and unzip it)
git clone https://github.com/hdhilip98/tailwindcss-vite-starter.git <project-name>
- You will now have the cloned project folder. Open the project in Visual Studio Code (recommended code editor for Tailwind CSS Projects)
- Open new terminal within Visual Studio Code
- Install dependencies
yarn install
- Start the dev server
yarn dev
- Build for production. This will create a production build in the
<root>/build/folder
yarn build
- Locally preview production build
yarn serve
You can also use equivalent "npm" commands if not comfortable with "yarn"
├── build (Production build will be generate here)
├── node_modules
├── public (Static assets will be served with / route)
├── src
│ ├── css
│ │ ├── **/*.css
│ ├── js
│ │ ├── **/*.js
│ └── index.html
├── .gitignore
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.js
├── vite.config.js
└── yarn.lock