Aaron Johnson

Sign in

How to Use Tailwindcss in a Sapper App Hosted with Vercel

Photo by Alex Kotliarskyi on Unsplash

Create new Sapper project

npx degit "sveltejs/sapper-template#rollup" my-app
cd my-app
npm install
code .

Install Tailwind

npm install @fullhuman/postcss-purgecss postcss-cli tailwindcss autoprefixer --save-dev
"watch:tailwind": "postcss static/tailwind.css -o static/index.css -w",
"build:tailwind": "NODE_ENV=production postcss static/tailwind.css -o static/index.css"
"build": "npm run build:tailwind && sapper build"

Set-Up PostCSS and Tailwindcss

npx tailwindcss init tailwind.js
module.exports = {
theme: {
extend: {}
},
variants: {},
plugins: []
}
const tailwindcss = require('tailwindcss');
const purgecss = require('@fullhuman/postcss-purgecss')({
content: ['./src/**/*.svelte', './src/**/*.html'],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});
module.exports = {
plugins: [
tailwindcss('./tailwind.js'),
...(proces.env.NODE_ENV === 'production' ? [purgecss] : [])
]
}

Generate CSS files

@tailwind base
@tailwind components
@tailwind utilities
npm run build:tailwind
npm run watch:tailwind
<link rel="stylesheet" href="index.css">

Vercel Configuration

npx vercel-sapper
export default app = polka(),use...
__sapper__
__sapper__/dev
__sapper__/export
cypress
node_modules

Set Up Github branches for Staging and Production

Setting up domains in Vercel

Front-end developer seeking to impart things that I have learned in the hopes that it will benefit someone in their developer journey.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store