Instalando Tailwind CSS via NPM e alterando suas propriedades CSS com theme \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 08 Min 12 Seg Tempo restante da oferta: 14 08 12 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Instalando Tailwind CSS via NPM e alterando suas propriedades CSS com theme [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ Desenvolvimento Web ](https://www.treinaweb.com.br/blog/categoria/entrevistas-desenvolvimento-web) # Instalando Tailwind CSS via NPM e alterando suas propriedades CSS com theme Neste artigo, veremos como instalar e utilizar a tecnologia Tailwind CSS via NPM. Também iremos alterar suas propriedades CSS com theme. [ Rafael Oliveira ](https://www.treinaweb.com.br/blog/autor/rafael-oliveira) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/TAILWIND-NPM.jpg) O Tailwind CSS é uma tecnologia muito utilizada pelos desenvolvedores front-end, e existem duas maneiras de instalar e usufruir dessa ferramenta, através da [instalação via CDN](http://www.treinaweb.com.br/blog/o-que-e-tailwind-css-e-como-instalar-via-cdn "CDN"), e a que iremos aprender neste artigo, via [NPM](http://www.treinaweb.com.br/blog/o-que-e-npm-e-como-usar-uma-biblioteca-instalada-por-ele "NPM"). ## Instalando TailwindCSS via NPM Primeiramente, devemos instalar em nossa máquina o [Node.js](http://www.treinaweb.com.br/blog/instalacao-do-node-js-windows-mac-e-linux "Node.js"). Após isso, iremos abrir o nosso Visual Studio Code, criar uma pasta com o nome de “tailwindcss”, em seguida, no canto superior esquerdo, iremos clicar na opção “Terminal”, e “New Terminal”. Feito isso, teremos o nosso terminal aberto, agora, para que possamos iniciar o nosso projeto, basta digitarmos `npm init -y`, criando assim o arquivo package.json [ ![Bootstrap - Primeiros passos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/bootstrap-5.svg) Curso Bootstrap - Primeiros passos Conhecer o curso ](https://www.treinaweb.com.br/curso/bootstrap-primeiros-passos) Em seguida, iremos instalar as dependências do Node.js junto do tailwindcss através do comando `npm install tailwindcss@latest postcss@latest autoprefixer@latest`, com isso, traremos as últimas atualizações lançadas. ### Iniciando arquivo de configurações Tailwind CSS Para que seja possível criarmos as nossas próprias estilizações CSS, como por exemplo, declarar cores específicas que iremos utilizar em nosso projeto, devemos iniciar o arquivo de configurações do Tailwind CSS. Isso é realizado através desse comando no terminal, `npx tailwindcss init`. Caso seja a primeira vez que esteja iniciando este pacote em sua máquina, possívelmente o Visual Studio Code irá pedir para digitar “y” e “enter”, assim, ele irá continuar o processo de inicialização do pacote de configurações do Tailwind CSS ### Importando arquivos Tailwind CSS Logo após importar os arquivos de configurações, devemos realizar os `imports` das camadas do Tailwind CSS, sendo elas, `base`, `components`, e `utilities`. Para isso, criaremos um arquivo CSS, com o nome `style.css`. Nele, colocaremos o seguinte código: ```css @tailwind base; @tailwind components; @tailwind utilities; ``` ### Finalizando a instalação via NPM Para concluirmos esta etapa, criaremos uma pasta chamada `src`, dentro dela iremos gerar um arquivo `html`, com o nome de `index.html`. É neste arquivo onde iremos escrever todo o conteúdo `html` da nossa página. Em seguida, ainda dentro de `src`, criaremos uma pasta com o nome de `CSS`. Através do terminal, traremos todo o CSS disponível pelo Tailwind CSS, com o seguinte comando, `npx tailwindcss-cli@latest build -o src/css/style.css`. Como resultado, dentro da pasta `CSS` que criamos dentro de `src`, teremos um arquivo com o nome de `style.css`, contendo nele todas as estilizações `CSS` que o Tailwind CSS nos disponibiliza. Por fim, basta irmos no nosso arquivo `html` e linkarmos o nosso arquivo `CSS` que foi gerado após executar o comando de `build`. Ficando dessa forma: ```html Tailwind CSS ``` Feito isso, iremos conseguir utilizar o Tailwind CSS. ## Alterando as estilizações do Tailwind CSS com theme Semelhantemente ao [Bootstrap](http://www.treinaweb.com.br/blog/o-que-e-bootstrap "bootstrap"), o Tailwind CSS também nos permite alterar suas estilizações que contém no seu arquivo `CSS`. Para isso, utilizaremos o arquivo de configurações do Tailwind CSS. ### Alterando cores com o theme Primeiramente, vamos abrir o arquivo de configurações `tailwind.config.js`, lá, teremos o seguinte código: ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: [], theme: { extend: {}, }, plugins: [], } ``` Só para exemplificar, vamos alterar a cor black padrão que o Tailwind CSS nos oferece, para uma tonalidade de cinza. Para isso, iremos declarar dentro de `theme`, o comando `colors:` e abrir chaves `{ }`, dentro das chaves, iremos escrever `black:` e entre aspas simples `' '`, iremos inserir o valor em hexadecimal da tonalidade do cinza que queremos, no caso será `#808080`, e adicionar uma vírgula após as aspas simples. O código irá ficar dessa forma: ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: [], theme: { colors: { black: '#808080', }, extend: {}, }, plugins: [], } ``` [ ![Node.js - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/node-js.svg) Curso Node.js - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/nodejs-fundamentos) Feito isso, para que a nossa alteração fique salva e seja renderizada no navegador, temos que executar o `build` novamente, `npx tailwindcss-cli@latest build -o src/css/style.css`. Vale lembrar que, toda vez que fizermos uma nova alteração, teremos que executar o comando de `build` para validar essas alterações. Quando alteramos uma cor utilizando `colors`, todas as demais do Tailwind CSS serão excluídas, ou seja, não iremos conseguir utilizar as cores padrões oferecidas por ele, apenas aquelas que iremos declarar para utilizar no nosso projeto, fazendo assim com que o nosso arquivo `CSS` fique mais leve. A fim de reforçar o conhecimento passado, vamos adicionar mais duas cores, um azul com o hexadecial `#4e56ff`, e um verde com o hexadecimal `#48d359`. Ficando dessa forma: ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: [], theme: { colors: { black: '#808080', blue: '#4e56ff', green: '#48d359' }, extend: {}, }, plugins: [], } ``` Por fim, basta executarmos o comando de `build`, para que as alterações sejam realizadas. Agora, no arquivo `html`, iremos criar três títulos com a tag `h1`. O primeiro título será “TreinaWeb!”, e terá a cor black, já o segundo, será “Escola Online” e terá a cor blue, e por fim, o terceiro que será “Para Desenvolvedores”, sua cor será green. O código `html` ficará dessa forma: ```html TailwindCSS TreinaWeb! Escola Online Para Desenvolvedores ``` [ ![Dart - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/dart.svg) Curso Dart - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/dart-fundamentos) No navegador, será apresentado assim: ![imagem com três título, um escrito TreinaWeb, o segundo está escrito Escola Online, e o terceiro, Para Desenvolvedores.](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/artigo-tailwind.png) ## Conclusão Neste artigo, vimos a simplicidade de utilizar o Tailwind CSS através da instalação via NPM e a liberdade que ele nos proporciona, permitindo alterar seus padrões de estilizações. Com isso, teremos também um projeto muito mais leve, utilizando apenas as estilizações necessárias, fazendo com que a nossa página carregue mais rápida ao ser acessada. - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #Tecnologia ](https://www.treinaweb.com.br/blog/tag/tecnologia) - [ #TailwindCSS ](https://www.treinaweb.com.br/blog/tag/tailwindcss) Autor ![Rafael Oliveira](//secure.gravatar.com/avatar/3dea81057f4d44ce6041d633799ba1a2?d=mm) ## Rafael Oliveira Estudante de programação, atualmente me especializando no Front End. Faço curso de Desenvolvimento de Sistemas na Escola Tecnica Estadual Doutora Ruth Cardoso e o meu principal objetivo é me tornar um Full Stack. Nas horas vagas costumo cozinhar, pois sou apaixonado pela área da culinária. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/rafael-oliveira) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/02/criando-componentes-tailwindcss-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Criando componentes com Tailwind CSS ](https://www.treinaweb.com.br/blog/criando-componentes-com-tailwind-css) Neste artigo veremos por que os componentes nos ajudam durante o desenvolvimento do nosso projeto e como conseguimos criá-los com Tailwind CSS Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/06/27155958/nvm-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 8 anos atrás ## [ Instalando e gerenciando várias versões do Node.js com NVM ](https://www.treinaweb.com.br/blog/instalando-e-gerenciando-varias-versoes-do-node-js-com-nvm) Aprenda a instalar e gerenciar várias versões do Node.js em sua máquina. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Trabalhando com eventos no NestJS ](https://www.treinaweb.com.br/blog/trabalhando-com-eventos-no-nestjs) Neste artigo vamos aprender a utilizar os eventos com o NestJS, criando um exemplo onde vamos simular o envio de e-mails. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 3 anos atrás ## [ Trabalhando com Prisma ORM e NestJS ](https://www.treinaweb.com.br/blog/trabalhando-com-prisma-orm-e-nestjs) Neste artigo vamos aprender os primeiros passos para trabalhar com o Prisma ORM e o NestJS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Guia do framework NestJS ](https://www.treinaweb.com.br/blog/guia-do-framework-nestjs) Neste guia do framework NestJS vamos fazer um compilado de tópicos úteis sobre o framework, desde criar um projeto básico até autenticação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/NEST-JS-CLASS-VALIDATOR-CLASS-TRANSFORMER-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Como enviar emails com NestJS e Nodemailer ](https://www.treinaweb.com.br/blog/como-enviar-emails-com-nestjs-e-nodemailer) Neste artigo vamos aprender como enviar emails utilizando o NestJS e o Nodemailer, um dos módulos mais utilizados do ecossistema NodeJS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/NEST-JS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 5 anos atrás ## [ O que é NestJS? ](https://www.treinaweb.com.br/blog/o-que-e-nestjs) Vamos ver neste artigo uma breve descrição sobre o que é o NestJS e como criar uma aplicação base em minutos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/EJS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 5 anos atrás ## [ Utilizando template engine EJS com Node.js ](https://www.treinaweb.com.br/blog/utilizando-template-engine-ejs-com-node-js) Neste artigo vamos aprender a utilizar a Template Engine EJS com Node.js e também alguns recursos interessantes desta ferramenta. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/06/NODE-SQUELIZE-MYSQL-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Usando Sequelize ORM com Node e Express ](https://www.treinaweb.com.br/blog/usando-sequelize-orm-com-node-e-express) Vamos aprender a configurar uma aplicação com banco de dados MySQL usando Sequelize ORM com Node.js e Express. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/06/TEMPLATE-ENGINE-PUG-EXPRESS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Express com Template Engine PUG ](https://www.treinaweb.com.br/blog/express-com-template-engine-pug) Neste artigo vamos estruturar um projeto utilizando Express com o Template Engine PUG e entender as suas principais características. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/como-instalar-o-dart-e-executar-seu-primeiro-exemplo-400x280.png) [ Dart ](https://www.treinaweb.com.br/blog/categoria/dart) 6 anos atrás ## [ Como instalar o Dart e executar seu primeiro exemplo ](https://www.treinaweb.com.br/blog/como-instalar-o-dart-e-executar-seu-primeiro-exemplo) Neste artigo veremos como instalar o Dart nos sistemas Windows, Linux e MacOS e executar nosso primeiro programa com a linguagem. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/PAGSEGURO-WOO-COMMERCE-400x280.png) [ WordPress ](https://www.treinaweb.com.br/blog/categoria/wordpress) 6 anos atrás ## [ Como configurar o PagSeguro no WooCommerce ](https://www.treinaweb.com.br/blog/como-configurar-o-pagseguro-no-woocommerce) Aprenda a configurar o método de pagamento PagSeguro em sua loja WooCommerce. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **14h 08min 12s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58