
Configurando projeto com vuejs, webpack, tailwind e sass
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