Eraly Chambo015

## tailwind-webpack-setup.md

      
              1 file
            
          
              56 forks
            
          
                48 comments
              
            
              196 stars
            
          
                bradtraversy
                / tailwind-webpack-setup.md
            
            
              Last active
              October 28, 2025 02:53
            
              
                Setup Webpack with Tailwind CSS
              
          
    Webpack & Tailwind CSS Setup

Create your package.json

npm init -y

Create your src folder

Create a folder called src and add an empty index.js file. The code that webpack compiles goes in here including any Javascript modules and the main Tailwind file.

  
## useWindowSize.js
import { useState, useEffect } from "react";

function useWindowSize() {
  const [windowSize, setWindowSize] = useState<{ width: number | undefined; height: number | undefined }>({
    width: undefined,
    height: undefined,
  });

  useEffect(() => {
    function handleResize() {

## setup-typescript.sh
#!/bin/bash

yarn add -D @typescript-eslint/eslint-plugin \
  typescript ts-node-dev \
  @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier

cat > .eslintrc.js <<EOF
module.exports = {
  root: true,
  env: {

## readme.md

      
              2 files
            
          
              1 fork
            
          
                21 comments
              
            
              30 stars
            
          
                loilo
                / readme.md
            
            
              Last active
              May 9, 2025 22:23
            
              
                Sass Dark/Light Theme Mixin
              
          
    Sass Dark/Light Theme Mixin

This is a Sass mixin to handle a 3-way dark mode. It relies on a data-theme attribute on your <html> element with a value of light or dark. If data-theme is absent (i.e. it's neither light nor dark), the system's preferred mode is used.
body {
  // matches data-theme="light" or data-theme="auto" with system instructing light mode
  @include light {
    background: white;
 color: black;

  
## tsconfig.json
// Файл "tsconfig.json":
// - устанавливает корневой каталог проекта TypeScript;
// - выполняет настройку параметров компиляции;
// - устанавливает файлы проекта.
// Присутствие файла "tsconfig.json" в папке указывает TypeScript, что это корневая папка проекта.
// Внутри "tsconfig.json" указываются настройки компилятора TypeScript и корневые файлы проекта.
// Программа компилятора "tsc" ищет файл "tsconfig.json" сначала в папке, где она расположена, затем поднимается выше и ищет в родительских папках согласно их вложенности друг в друга.
// Команда "tsc --project C:\path\to\my\project\folder" берет файл "tsconfig.json" из папки, расположенной по данному пути.
// Файл "tsconfig.json" может быть полностью пустым, тогда компилятор скомпилирует все файлы с настройками заданными по умолчанию.
// Опции компилятора, перечисленные в командной строке перезаписывают собой опции, заданные в файле "tsconfig.json".

## media-query-template.css
/**
 * Basic CSS Media Query Template
 * TODO: I should probably use Sass...
 * Author: Michael Vieth
 * ------------------------------------------
 *  Responsive Grid Media Queries - 1280, 1024, 768, 480
 *   1280-1024   - desktop (default grid)
 *   1024-768    - tablet landscape
 *   768-480     - tablet
 *   480-less    - phone landscape & smaller
	import { useState, useEffect } from "react";

	function useWindowSize() {
	const [windowSize, setWindowSize] = useState<{ width: number \| undefined; height: number \| undefined }>({
	width: undefined,
	height: undefined,
	});

	useEffect(() => {
	function handleResize() {
	#!/bin/bash

	yarn add -D @typescript-eslint/eslint-plugin \
	typescript ts-node-dev \
	@typescript-eslint/parser @typescript-eslint/eslint-plugin eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier

	cat > .eslintrc.js <<EOF
	module.exports = {
	root: true,
	env: {
	// Файл "tsconfig.json":
	// - устанавливает корневой каталог проекта TypeScript;
	// - выполняет настройку параметров компиляции;
	// - устанавливает файлы проекта.
	// Присутствие файла "tsconfig.json" в папке указывает TypeScript, что это корневая папка проекта.
	// Внутри "tsconfig.json" указываются настройки компилятора TypeScript и корневые файлы проекта.
	// Программа компилятора "tsc" ищет файл "tsconfig.json" сначала в папке, где она расположена, затем поднимается выше и ищет в родительских папках согласно их вложенности друг в друга.
	// Команда "tsc --project C:\path\to\my\project\folder" берет файл "tsconfig.json" из папки, расположенной по данному пути.
	// Файл "tsconfig.json" может быть полностью пустым, тогда компилятор скомпилирует все файлы с настройками заданными по умолчанию.
	// Опции компилятора, перечисленные в командной строке перезаписывают собой опции, заданные в файле "tsconfig.json".
	/**
	* Basic CSS Media Query Template
	* TODO: I should probably use Sass...
	* Author: Michael Vieth
	* ------------------------------------------
	* Responsive Grid Media Queries - 1280, 1024, 768, 480
	* 1280-1024 - desktop (default grid)
	* 1024-768 - tablet landscape
	* 768-480 - tablet
	* 480-less - phone landscape & smaller