diff --git a/examples/tailwind/README.md b/examples/tailwind/README.md new file mode 100644 index 0000000000..a0c32cd9a0 --- /dev/null +++ b/examples/tailwind/README.md @@ -0,0 +1,10 @@ +--- +layout: layouts/main.njk +title: Tailwind +--- + +### Learn more + +- [Tailwind docs on Snowpack][tailwind] + +[tailwind]: https://www.snowpack.dev/guides/tailwind-css/ diff --git a/examples/tailwind/package.json b/examples/tailwind/package.json new file mode 100644 index 0000000000..a5a8269a0b --- /dev/null +++ b/examples/tailwind/package.json @@ -0,0 +1,17 @@ +{ + "name": "@snowpack/example-react-loadable-components", + "version": "0.0.1", + "private": true, + "scripts": { + "start": "snowpack dev", + "build": "snowpack build" + }, + "dependencies": {}, + "devDependencies": { + "@snowpack/plugin-postcss": "^1.2.2", + "postcss": "^8.2.15", + "postcss-cli": "^8.3.1", + "snowpack": "^3.4.0", + "tailwindcss": "^2.1.2" + } +} diff --git a/examples/tailwind/postcss.config.js b/examples/tailwind/postcss.config.js new file mode 100644 index 0000000000..46ec55d46b --- /dev/null +++ b/examples/tailwind/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + // other plugins can go here, such as autoprefixer + }, +}; diff --git a/examples/tailwind/public/global.css b/examples/tailwind/public/global.css new file mode 100644 index 0000000000..b5c61c9567 --- /dev/null +++ b/examples/tailwind/public/global.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/examples/tailwind/public/index.html b/examples/tailwind/public/index.html new file mode 100644 index 0000000000..38e300e4d7 --- /dev/null +++ b/examples/tailwind/public/index.html @@ -0,0 +1,31 @@ + + + + + Tailwind Example + + + +
+ +
+
+

+ “Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to + customize, adapts to any design, and the build size is tiny.” +

+
+
+
Sarah Dayan
+
Staff Engineer, Algolia
+
+
+
+ + diff --git a/examples/tailwind/snowpack.config.js b/examples/tailwind/snowpack.config.js new file mode 100644 index 0000000000..bb42b832b2 --- /dev/null +++ b/examples/tailwind/snowpack.config.js @@ -0,0 +1,8 @@ +/** @type {import("snowpack").SnowpackUserConfig } */ +module.exports = { + mount: { + public: '/', + src: '/_dist', + }, + plugins: ['@snowpack/plugin-postcss'], +}; diff --git a/examples/tailwind/tailwind.config.js b/examples/tailwind/tailwind.config.js new file mode 100644 index 0000000000..27fcf519d6 --- /dev/null +++ b/examples/tailwind/tailwind.config.js @@ -0,0 +1,5 @@ +module.exports = { + mode: 'jit', + purge: ['./public/**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}'], + // specify other options here +}; diff --git a/snowpack/src/commands/dev.ts b/snowpack/src/commands/dev.ts index aa2062a2bb..542647a9e2 100644 --- a/snowpack/src/commands/dev.ts +++ b/snowpack/src/commands/dev.ts @@ -683,7 +683,12 @@ export async function startServer( config, hmrEngine, }); - inMemoryBuildCache.set(cacheKey, fileBuilder); + + const shouldCache = !fileLoc.endsWith('.css'); // Tailwind workaround: don’t cache built .css files + + if (shouldCache) { + inMemoryBuildCache.set(cacheKey, fileBuilder); + } } function handleFinalizeError(err: Error) {