Configurando projeto com vuejs, webpack, tailwind e sass

Herisson Silva
Sep 3, 2018 · 1 min read

Primeiramente se cria o projeto inicial com vue-cli:

$ vue init webpack nomedoprojeto

Segundo passo é instalar o tailwind:

$ npm i -d tailwindcss

Para que se possa utilizar sass instala-se as depêndencias:

$ npm i -d node-sass sass-loader

Apos instalar o tailwind é necessario iniciar o arquivo de configuração do mesmo:

$ ./node_modules/.bin/tailwind init tailwind.js

e também alterar o arquivo .postcssrc.js deixa-lo da seguinte forma:

var tailwindcss = require(‘tailwindcss’);

module.exports = {

“plugins”: [

require(‘postcss-import’)(),

require(‘tailwindcss’)(‘./tailwind.js’),

require(‘autoprefixer’)(),

]

}

Com isso já é possível desenvolver com essas tecnologias, uma outra dica vai servir para quando for por em produção, ao buildar você irá notar que o arquivo css vai ficar enorme, existem algumas medidas que podem ser tomadas para evitar isso, mas, a principal é utilizar o purgecss.

$ npm i -d glob-all purgecss-webpack-plugin

Adiciona no arquivo webpack.prod.conf.js as linhas abaixo, na linha 13

const PurgecssPlugin = require(‘purgecss-webpack-plugin’)

const glob = require(‘glob-all’)

e na linha 58

new PurgecssPlugin({

paths: glob.sync([

path.join(__dirname, ‘./../src/index.html’),

path.join(__dirname, ‘./../**/*.vue’),

path.join(__dirname, ‘./../**/*.css’),

path.join(__dirname, ‘./../**/*.sass’),

path.join(__dirname, ‘./../src/**/*.js’)

])

})

Referências:

https://www.purgecss.com/guides/vue

https://tailwindcss.com/docs/installation

http://stagerightlabs.com/blog/using-tailwind-with-sass-vue-cli-and-wepback.html

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade