We use plain HTML and Tailwind CSS to create static Tailwind CSS templates, and few vanilla JS plugins for interaction (like slider, video and image popup).
Here is the structure of download folder.
|-- Template Folder
|-- src
| |-- css
| |-- All CSS Files
| |-- js
| |-- All JS Files
| |-- images
| |-- All Images
| |-- index.html and All HTML Files
| |-- tailwind.css (you have to edit on this file if needed)
|
|-- build
| |-- All build files you have to deploy
|
|-- All Config files
If you want to customize template just go with src
folder here you will get all files.
As we need to install our dependencies we need to have NODEJS installed in our machine. Then we can install via run the command below after the downloading file.
npm install
After installing the packages you can view the template in any browser or edit the template by using the dev version to use the dev version just give this command in project root. And then it will automatically open localhost:3000 in your default browser
npm start
To deploy your template on the internet you have to run the command below, and then you have to just upload the build
folder to your server.
npm run build
If you are using github repo then you can go with free of cost and easy to use Netlify.
Some of our Tailwind templates has dark mode switcher, here is how you can switch your entire template into to single mode (dark or light)
If you want to use template Light version permanently, you need to just update the body tag of All Pages x-data={'darkMode': false}.
If you want to make dark-mode default, you need to just update the body tag of All Pages x-data={'darkMode': true}.
And don't forget to remove the toggle button from html files.
We use some of vanilla js plugins for interaction.
We use images form Unsplash