TailwindCSS Başlangıç Projesi Oluşturmak

Merhaba, kendi websitemi de oluşturduğum CSS frameworkü TailwindCSS’yi kurmak ve konfigüre etmek biraz zor. Bu sebeple taban (starter) proje oluşturmayı göstermek için bir makale yazmak istedim. Öncelikle TailwindCSS nedir bilmeyen dostlarımız için o kısma değinelim.

TailwindCSS Nedir?

TailwindCSS Laravel ekibinden insanların gönüllü olarak geliştirdiği açık kaynaklı bir CSS yardımcı araç kitidir. Bootstrap ve Foundationdan farklı olarak UI kit değildir, komponent bazlı değildir. Yardımcı classları kullanarak komponentleri sizin geliştirmeniz beklenmektedir. Örnek olarak şu an websitemin kaynak kodlarını incelerseniz TailwindCSS baz classları kullanarak oluşturulduğunu görürsünüz. HTML/CSS konusuna hakim olan dostlarım zaten kodları gördüğünde olayı anlayacaktır.

TailwindCSS Projesi Nasıl Oluşturulur?

İlk önce klasör oluşturup npmi başlatmalıyız, ardından gereken paketleri development ve main branch olarak ayırarak kurulumunu gerçekleştirmeliyiz.

$ mkdir tailwindstarter
$ npm init
$ npm install tailwindcss@latest postcss@latest autoprefixer@latest
$ npm install -D concurrently@latest cross-env@latest cssnano@latest live-server@latest postcss-cli@latest

Bu adımlardan sonra postcss.config.js dosyamızı oluşturuyoruz ve içeriğini aşağıdaki gibi yapıyoruz.

$ nano postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    ...(process.env.NODE_ENV === "production" ? [require("cssnano")] : []),
  ],
};

Bu dosyayı oluşturduktan sonra aşağıdaki komutu girerek tailwind config dosyamızı oluşturuyoruz.

$ npx tailwind init

Ardından tailwind.config.js dosyamızın içeriğini aşağıdakine uygun olarak düzenleyelim.

module.exports = {
  purge: [
    './public/**/*.html',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Bu adımda kendi dosyanızda büyük ihtimalle purge kısmını sizinkinden farklı göreceksiniz. Bu kısmın sebebi PostCSS preprocessor kullandığımızdan production buildi aldığımızda kullanmadığımız classların çıkarılmasını sağlayacaktır. Örnek kullanımı aynı şekilde kendi sitemdeki build.css dosyasını görüntüleyerek görebilirsiniz. Tailwind salt hali ile 2-3 MB arası bir boyuttayken sitemde production build sonrası 46kB boyutuna düşmüştür.

Bu işlemlerin ardından yaptığımız işlemler dışında aşağıdaki klasör yapısını oluşturalım.

├── package.json
├── package-lock.json
├── postcss.config.js
├── public
│   └── index.html
├── src
│   ├── css
│   │   └── app.css
│   └── js
│       └── app.js
└── tailwind.config.js

Klasör yapımızı bu hale getirmemizin sebebi src klasörü içerisinde css ve javascript dosyalarımızın birlikte derlenmemiş hali bulunmasıdır. Public klasörümüz içerisine dosyamızda değişiklik yaptıkça sürekli otomatik olarak development buildi derlenecektir.

src/css içerisinde oluşturduğunuz app.css dosyasını açın ve içeriğini aşağıdaki ile değiştirin. Bu değişiklik sayesinde Tailwind kütüphanesinin stillerini projenize ekleyeceksiniz.

@tailwind base;
@tailwind components;
@tailwind utilities;

Son olarak projemizi nasıl çalıştıracağız dediğinizi duyar gibiyim. package.json dosyamızı düzenleyip çalıştırma scriptlerimizi girelim ve kolay şekilde projemizi tekrar tekrar çalıştırabilelim.

"scripts": {
    "serve": "cross-env NODE_ENV=development concurrently \"postcss src/css/app.css -o public/css/build.css --watch\" > "development": "cross-env NODE_ENV=development postcss src/css/app.css -o public/css/build.css",
    "production": "cross-env NODE_ENV=production postcss src/css/app.css -o public/css/build.css"
},

Burada eklediğiniz kodda live browser edit ile kullanmak için npm run serve, production buildi alabilmek için ise npm run production yazmanız gerekmektedir.

Starter projesini bu kadar uğraşmadan kullanmak istiyorsanız makaleyi hazırlarken oluşturduğum hazır halini github adresime ekledim. dogukanoksuz/tailwind-starter: TailwindCSS + PostCSS Starter Pack (github.com) adresinden ulaşabilirsiniz.

Sorularınız için aşağıdaki yorum bölümünü kullanabilirsiniz. Okuduğunuz için teşekkür ederim.