A starter kit to get going with tailwind, gulp and browser-sync.
Time to design in the browser and create something awesome with tailwind!
This starter kit gives you a browser-sync dev server, which comes pretty handy. Everytime you save a HTML file, your browser will inject new styles / reload the page for your convenience, so you can focus on what you're creating.
Go ahead and build something cool!
How to get started?
- Clone this repo
npm installto install the required dependencies
- Customise the
tailwind.jsconfig file (only if needed!)
gulpto kickoff the dev server, and open your browser window. Optionally you can run the following:
npm run devto start the development server
npm run buildto run a build without starting the server
./dist/and start creating!
If you make changes to the tailwind config, you may need to stop and restart the browser-sync server for changes to apply.
PurgeCSS isn't allowing the compilation classes with prefix
I don't know why, but, when I try to use
md:w-1/2on any element for example, the
/dist/path does not contain these prefixes.
If I put a comment on this line, it works. https://github.com/simonswiss/tailwind-starter/blob/a8f5baa3ad0cac2ea005a7195543cfbc40222fd4/gulpfile.js#L17
Does it happen to anyone else?
CSS changes aren't showing with browser-sync
Markup changes are reflected immediately with browser-sync, but to see css changes (when I add classes) I have to restart the browser-sync server. Maybe, I'm missing something?
Error: Cannot find module 'autoprefixer'
$ gulp [17:24:08] Using gulpfile F:\tailwind-starter-master\gulpfile.js [17:24:08] Starting 'css'... [17:24:08] 'css' errored after 6.16 ms [17:24:08] Error: Cannot find module 'autoprefixer' at Function.Module._resolveFilename (module.js:542:15) at Function.Module._load (module.js:472:25) at Module.require (module.js:585:17) at require (internal/module.js:11:18) at Gulp.gulp.task (F:\tailwind-starter-master\gulpfile.js:22:52) at module.exports (F:\tailwind-starter-master\node_modules\orchestrator\lib\runTask.js:34:7) at Gulp.Orchestrator._runTask (F:\tailwind-starter-master\node_modules\orchestrator\index.js:273:3) at Gulp.Orchestrator._runStep (F:\tailwind-starter-master\node_modules\orchestrator\index.js:214:10) at Gulp.Orchestrator.start (F:\tailwind-starter-master\node_modules\orchestrator\index.js:134:8) at D:\nodejs_global_modules\node_modules\gulp\bin\gulp.js:129:20
Adds NPM/Yarn scripts
Adds package scripts (npm/yarn).
I think this has a couple advantages:
buildwithout starting the entire server
gulpglobally available because package scripts reference
Gulpfile needs to run css task on html change
Hi, thanks for the starter kit, very handy to get to grips with Tailwind.
When I edit the index.html file and add something that would change the CSS, for example, on the container class I add bg-blue-lightest, when the browser is reloaded the background colour does not show. This seems to be because the html watch task only reloads the browser. Because the CSS has been purged it does not contain a definition for bg-blue-lightest so doesn't show.
The solution I used was to add
gulp.watch(paths.dist.base + "*.html", ["css"]);
before the existing html watch line.
Now when I change the index.html file it rebuilds the css file before reloading the browser.