Tailwind Starter
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
yarn
ornpm install
to install the required dependencies- Customise the
tailwind.js
config file (only if needed!) gulp
to kickoff the dev server, and open your browser window. Optionally you can run the following:yarn dev
ornpm run dev
to start the development serveryarn build
ornpm run build
to run a build without starting the server
- Edit
index.html
in./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.
Have fun!
PurgeCSS isn't allowing the compilation classes with prefix
Hi guys,
I don't know why, but, when I try to use
hover:text-green
ormd:w-1/2
on any element for example, the.css
file in/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:
build
without starting the entire servergulp
globally available because package scripts reference./node_modules/.bin/*
to yourPATH
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.