Skip to content
Permalink
Browse files

Add postcss, tailwind

  • Loading branch information...
Thanh Phong
Thanh Phong committed May 27, 2019
1 parent 4091c54 commit 9d436a85530fca654882c8f9ece8ace7778aa22b
Showing with 43 additions and 46 deletions.
  1. +8 −1 package.json
  2. +26 −3 rollup.config.js
  3. +1 −1 src/routes/_error.svelte
  4. +1 −5 src/routes/_layout.svelte
  5. +1 −0 src/server.js
  6. +1 −0 src/tailwind.css
  7. +0 −36 static/global.css
  8. +5 −0 tailwind.config.js
@@ -31,6 +31,13 @@
"rollup-plugin-svelte": "^5.0.1",
"rollup-plugin-terser": "^4.0.4",
"sapper": "^0.27.0",
"svelte": "^3.0.0"
"svelte": "^3.0.0",
"postcss": "^7.0.16",
"postcss-import": "^12.0.1",
"postcss-url": "^8.0.0",
"rollup-plugin-postcss": "^2.0.3",
"autoprefixer": "^9.5.1",
"svelte-preprocess": "^2.9.0",
"tailwindcss": "^1.0.1"
}
}
@@ -6,11 +6,29 @@ import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import config from 'sapper/config/rollup.js';
import pkg from './package.json';

import getPreprocessor from 'svelte-preprocess'
import postcss from 'rollup-plugin-postcss'
import path from 'path'
const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;


const postcssPlugins = [
require("postcss-import")(),
require("postcss-url")(),
require("tailwindcss")("./tailwind.config.js"),
require("autoprefixer")({ browsers: "last 3 version" })
]

const preprocess = getPreprocessor({
transformers: {
postcss: {
plugins: postcssPlugins
}
}
});

export default {
client: {
input: config.client.input(),
@@ -23,7 +41,8 @@ export default {
svelte({
dev,
hydratable: true,
emitCss: true
emitCss: true,
preprocess
}),
resolve(),
commonjs(),
@@ -64,7 +83,11 @@ export default {
dev
}),
resolve(),
commonjs()
commonjs(),
postcss({
plugins: postcssPlugins,
extract: path.resolve(__dirname, './static/global.css')
})
],
external: Object.keys(pkg.dependencies).concat(
require('module').builtinModules || Object.keys(process.binding('natives'))
@@ -7,7 +7,7 @@

<style>
h1, p {
margin: 0 auto;
@apply mx-auto my-0;
}
h1 {
@@ -6,11 +6,7 @@

<style>
main {
position: relative;
max-width: 56em;
background-color: white;
padding: 2em;
margin: 0 auto;
@apply relative bg-white p-8 max-w-4xl mx-auto my-0;
box-sizing: border-box;
}
</style>
@@ -3,6 +3,7 @@ import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';

import './tailwind.css'

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';
@@ -0,0 +1 @@
@import "tailwindcss/base";

This file was deleted.

@@ -0,0 +1,5 @@
module.exports = {
theme: {},
variants: {},
plugins: [],
}

0 comments on commit 9d436a8

Please sign in to comment.
You can’t perform that action at this time.