Tailwind CSS Templates
Tailwind CSS Templates
We use plain HTML and TailwindCSS to create static TailwindCSS 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.
After installing the packages you can view the template in any browser or edit the template. If you edit any thing you have to run the command below to build css.
npm run build-css
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. It will obfuscate the css class names. If you want to ignore this just go with
src folder and upload to you server.
If you are using github repo then you can go with free of cost and easy to use Netlify.
We added class prefix intentionally to make your template/site copy protected. Since Tailwind is utility class based so, anyone can copy-paste your code and get same results. You can remove class prefix by simply following 3 steps.
- Find and replace "ud-“ with empty text from all HTML files (src/html-files)
- And remove prefix: "ud-“, from tailwind.config.js file
- Compile your code again, done!
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 remove the script from main.js file of template directory. If Templatee comes with dark mode by default you have to remove ud-dark class from html tag.
If you want to make dark-mode default, you have to add ud-dark class to the html tag. Also you have to remove the script coded on main.js file.
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 UnsplashEdit this page on GitHub