Tailwind é um framework CSS que prioriza o utilitário, o que significa que, ao contrário de outros frameworks CSS como Bootstrap ou Materialize CSS, ele não vem com componentes prontos. Em vez disso, o Tailwind CSS fornece um conjunto de classes auxiliares CSS que permitem a implementação rápida de designs personalizados com facilidade, para que você não fique preso ao uso de componentes genéricos predefinidos.
Com o Tailwind, você pode implemente seus designs personalizados confortavelmente com classes CSS predefinidas.
Neste artigo, examinaremos mais de perto como configurar e começar a usar o Tailwind em seu aplicativo Svelte. Aprenderemos como instalar a biblioteca Tailwind, inicializá-la e usá-la para definir o estilo de nossos componentes.
Para acompanhar, você deve ter um conhecimento prático de JavaScript e Svelte .
Instalação
Para criar um aplicativo Svelte , primeiro certifique-se de ter o Node.js instalado em seu computador. Você pode verificar digitando o seguinte comando em seu terminal:
node-v
Se ainda não estiver instalado, basta ir ao site do Node para baixe a versão mais recente .
Além disso, você precisará instalar a biblioteca degit para poder clonar o modelo Svelte:
npm install-g degit
Quando terminar, podemos começar com nosso aplicativo Svelte criando uma pasta vazia e clonando o modelo em nosso projeto chamado tailwind:
npx degit sveltejs/template tailwind
Então, vamos para a pasta do nosso projeto no terminal:
cd tailwind
Agora que configuramos, podemos instalar as dependências do nosso projeto:
npm install
Em seguida, executamos o aplicativo Svelte com o seguinte:
npm run dev
Instalando o Tailwind em um aplicativo Svelte
Agora que nosso aplicativo Svelte está pronto, temos que instalar Tailwind usando o e o seguinte comando:
npm install tailwindcss @ npm: @ tailwindcss/postcss7-compat postcss-cli @ ^ 7 autoprefixer @ ^ 9 simultaneamente cross-env–save-dev
Para a maioria dos projetos (e para tirar vantagem dos recursos de personalização do Tailwind), você desejará instalar o Tailwind e suas dependências de pares via npm. simultaneamente nos permite executar vários comandos, que usaremos em nossos scripts npm posteriormente.
Porque não estamos usando a CLI do Tailwind para integrar o Tailwind em nosso projeto e Tailwind CSS não fornece nenhum prefixo de fornecedor , Autoprefixer é recomendado. O Autoprefixer rastreia caniuse.com para ver quais propriedades CSS precisam ser prefixadas para garantir a consistência entre os navegadores.
Configuração PostCSS
A seguir, criaremos manualmente um arquivo de configuração PostCSS (postcss.config.js) em nosso diretório base.
Adicione as seguintes linhas de código ao seu arquivo:
const tailwindcss=require (‘tailwindcss’); const autoprefixer=require (“autoprefixer”); module.exports={plugins: [require (“tailwindcss”), require (“autoprefixer”)]}
PostCSS é necessário para lint nosso CSS, daí esta configuração.
Tailwind config
Como na etapa anterior, agora criaremos manualmente um arquivo de configuração do Tailwind (tailwind.config.js) no diretório base.
Agora podemos definir nossas próprias opções de configuração. Atualmente, o arquivo de configuração abaixo usa purge para remover todos os CSS não usados na produção:
const production=! Process.env.ROLLUP_WATCH; module.exports={futuro: {purgeLayersByDefault: true, removeDeprecatedGapUtilities: true,}, plug-ins: [], purge: {content: [“./src/App.svelte”,], ativado: produção//desativar purge em dev },};
Criando arquivos CSS
Vamos agora criar nossos arquivos tailwind.css e index.css reais dentro da pasta pública.
No arquivo tailwind.css, vamos adicioná-los diretivas:
@tailwind base; componentes @tailwind; @tailwind utilities;
Ainda em nossa pasta pública, navegaremos para nosso index.html e importaremos index.css dentro de nossa tag head:
Agora, vá para nosso package.json e use os seguintes scripts:
“scripts”: {“watch: tailwind”:”postcss public/tailwind.css-o public/index.css-w”,”build: tailwind”:”cross-env NODE_ENV=produção postcss public/tailwind.css-o public/index.css”,”build”:”npm run build: tailwind && rollup-c”,”start”:”sirv public”,”serve”:”serve public-p 80″,”dev”:”simultaneamente \”rollup-c-w \”\”npm execute watch: tailwind \””},
Agora execute:
npm run dev
Integramos com sucesso o Tailwind em nosso projeto Svelte!
Podemos confirmar isso adicionando as seguintes classes Tailwind ao nosso arquivo App.svelte:
Visite o Svelte tutorial para aprender como construir aplicativos Svelte.
Agora você deve ver isto:
Construindo uma galeria de fotos
Agora, vamos usar nossa biblioteca CSS recém-criada para construir um galeria de fotos. Vamos limpar o HTML existente em nosso App.svelte e seguir este guia para criar uma galeria como a mostrada aqui:
Primeiro, criaremos um div circundante:
A classe container define a largura máxima de nosso div como a largura mínima do ponto de interrupção atual. Isso é útil se você preferir projetar para um conjunto fixo de tamanhos de tela em vez de tentar acomodar uma janela de visualização totalmente fluida.
Enquanto o mx-auto centra o div, a borda cria uma borda e a borda-indigo-500 adiciona cor de borda e outros detalhes de estilo:
Em seguida, adicionamos nosso título “Galeria de fotos” em uma tag h1. O negrito da fonte ajuda a aumentar a espessura da fonte para 700 e o text-5xl define o tamanho da fonte para 3rem.
Seção da imagem
Existem dois elementos da seção nas imagens acima. A primeira seção contém duas imagens, enquanto a segunda seção contém seis (três imagens por linha):
A primeira seção tem a classe py-8 que adiciona preenchimento na parte superior e inferior, e px-4 para preenchimento à esquerda e à direita.
Então, há um div interno circundante que contém as classes flex, flex-wrap e mx-4 do Tailwind. Essas classes definem a exibição para flex, define flex-wrap para embrulhar e adiciona uma margem à esquerda e à direita.
Para as próprias imagens, elas são cercadas individualmente por um div com classes * classe * do Tailwind=”md: w-1/2 px-4 mb-8 md: mb-0″. Isso determina a largura de cada imagem, que é 1/2 do div pai. Ele também estiliza o preenchimento e a margem.
As próprias imagens agora têm a classe arredondada, que aplica tamanhos de raio de borda. shadow-md adiciona sombras de caixa ao elemento.
A segunda seção tem os mesmos estilos. A única diferença é que o div imediato em torno de cada imagem tem a classe Tailwind md: w-1/3, que garante que a largura de cada imagem seja 1/3 do div pai, tornando-o três imagens por linha.
Conclusão
Parabéns, se você chegou até aqui. Você aprendeu com sucesso como configurar seu projeto Svelte e adicionar estilos bonitos com o Tailwind. O repo com todo esse código está no GitHub .
Se desejar para ir mais longe, adicione mais classes CSS para tornar a galeria de fotos mais bonita. Por exemplo, você pode adicionar mais páginas, componentes e até mesmo transições. A documentação do Tailwind mostrará as classes corretas para qualquer estilo que você espera criar:
