Postcss mặc định không phải là một chức năng

Question

Vì Tailwind là một khuôn khổ để xây dựng giao diện người dùng riêng nên nó đã được thiết kế từ đầu có tính đến khả năng tùy chỉnh

Nội dung chính Show

Tạo tập tin cấu hình của bạn
Sử dụng một tên tập tin khác
Tạo tệp cấu hình PostCSS
Giàn giáo toàn bộ cấu hình mặc định
Tùy chọn cấu hình
chủ đề
cài đặt trước
tiền tố
quan trọng
phân cách
Plugin cốt lõi
Sử dụng nhiều cấu hình
Tham chiếu trong JavaScript
Các loại TypeScript

Theo mặc định, Tailwind sẽ tìm tệp

npx tailwindcss init

9 tùy chọn ở gốc dự án của bạn, nơi bạn có thể xác định bất kỳ tùy chỉnh nào

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

Mỗi phần của tệp cấu hình là tùy chọn, vì vậy bạn chỉ phải chỉ định những gì bạn muốn thay đổi. Mọi phần bị thiếu sẽ trở về cấu hình mặc định của Tailwind

Tạo tập tin cấu hình của bạn

Tạo tệp cấu hình Tailwind cho dự án của bạn bằng tiện ích Tailwind CLI đi kèm khi bạn cài đặt gói

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

0 npm

npx tailwindcss init

Điều này sẽ tạo một tệp

npx tailwindcss init

9 tối thiểu ở thư mục gốc của dự án của bạn

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Sử dụng một tên tập tin khác

Để sử dụng một tên khác với tên

npx tailwindcss init

9, hãy chuyển nó làm đối số trên dòng lệnh

npx tailwindcss init tailwindcss-config.js

Khi sử dụng tên tệp tùy chỉnh, bạn sẽ cần chỉ định tên đó làm đối số dòng lệnh khi biên dịch CSS bằng công cụ Tailwind CLI

________số 8

Nếu đang sử dụng Tailwind làm plugin PostCSS, bạn sẽ cần chỉ định đường dẫn cấu hình tùy chỉnh trong cấu hình PostCSS của mình

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwindcss-config.js' },
  },
}

Ngoài ra, bạn có thể chỉ định đường dẫn cấu hình tùy chỉnh của mình bằng cách sử dụng chỉ thị

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

3

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

1

Tìm hiểu thêm về chỉ thị

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

3 trong tài liệu Chức năng & Chỉ thị

Tạo tệp cấu hình PostCSS

Sử dụng cờ

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

5 nếu bạn cũng muốn tạo tệp

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

6 cơ bản cùng với tệp

npx tailwindcss init

9 của mình

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

6

Điều này sẽ tạo ra một tệp

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

6 trong dự án của bạn trông như thế này

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

8

Giàn giáo toàn bộ cấu hình mặc định

Đối với hầu hết người dùng, chúng tôi khuyến khích bạn giữ tệp cấu hình của mình ở mức tối thiểu nhất có thể và chỉ chỉ định những thứ bạn muốn tùy chỉnh

Nếu bạn muốn tạo một tệp cấu hình hoàn chỉnh bao gồm tất cả cấu hình mặc định của Tailwind, hãy sử dụng tùy chọn

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

9

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

0

Bạn sẽ nhận được một tệp khớp với tệp cấu hình mặc định mà Tailwind sử dụng nội bộ

Tùy chọn cấu hình

nội dung

Phần

npx tailwindcss init tailwindcss-config.js

0 là nơi bạn định cấu hình đường dẫn đến tất cả các mẫu HTML, thành phần JS và bất kỳ tệp nào khác có chứa tên lớp Tailwind

Tìm hiểu thêm về cách định cấu hình nguồn nội dung của bạn trong tài liệu Cấu hình nội dung

chủ đề

Phần

npx tailwindcss init tailwindcss-config.js

1 là nơi bạn xác định bảng màu, phông chữ, tỷ lệ loại, kích thước đường viền, điểm ngắt — bất kỳ thứ gì liên quan đến thiết kế trực quan của trang web của bạn

Tìm hiểu thêm về chủ đề mặc định và cách tùy chỉnh chủ đề đó trong hướng dẫn cấu hình chủ đề

plugin

Phần

npx tailwindcss init tailwindcss-config.js

2 cho phép bạn đăng ký các phần bổ trợ với Tailwind. Phần bổ trợ này có thể dùng để tạo các tiện ích, thành phần, kiểu cơ sở hoặc biến thể tùy chỉnh bổ sung

Tìm hiểu thêm về cách viết plugin của riêng bạn trong hướng dẫn tác giả plugin

cài đặt trước

Phần

npx tailwindcss init tailwindcss-config.js

3 cho phép bạn chỉ định cấu hình cơ sở tùy chỉnh của riêng mình thay vì sử dụng cấu hình cơ sở mặc định của Tailwind

Tìm hiểu thêm về cài đặt trước trong tài liệu cài đặt trước

tiền tố

Tùy chọn

npx tailwindcss init tailwindcss-config.js

4 cho phép bạn thêm tiền tố tùy chỉnh vào tất cả các lớp tiện ích do Tailwind tạo. Điều này có thể thực sự hữu ích khi xếp lớp Tailwind lên trên CSS hiện có, nơi có thể xảy ra xung đột về đặt tên

Ví dụ: bạn có thể thêm tiền tố

npx tailwindcss init tailwindcss-config.js

5 bằng cách đặt tùy chọn

npx tailwindcss init tailwindcss-config.js

4 như vậy

npx tailwindcss init

0

Bây giờ mọi lớp sẽ được tạo với tiền tố được định cấu hình

Điều quan trọng là phải hiểu rằng tiền tố này được thêm vào sau bất kỳ công cụ sửa đổi biến thể nào. Điều đó có nghĩa là các lớp có công cụ sửa đổi trạng thái hoặc phản hồi như

npx tailwindcss init tailwindcss-config.js

7 hoặc

npx tailwindcss init tailwindcss-config.js

8 sẽ vẫn có công cụ sửa đổi trạng thái hoặc phản hồi trước, với tiền tố tùy chỉnh của bạn xuất hiện sau dấu hai chấm

Công cụ sửa đổi dấu gạch ngang cho các giá trị âm phải được thêm vào trước tiền tố của bạn, vì vậy,

npx tailwindcss init tailwindcss-config.js

9 sẽ trở thành

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

0 nếu bạn đã định cấu hình

npx tailwindcss init tailwindcss-config.js

5 làm tiền tố của mình

Tiền tố chỉ được thêm vào các lớp do Tailwind tạo;

Điều đó có nghĩa là nếu bạn thêm tiện ích tùy chỉnh của riêng mình như thế này

…các biến thể đã tạo sẽ không có tiền tố đã định cấu hình của bạn

Nếu bạn cũng muốn đặt tiền tố cho các tiện ích của riêng mình, chỉ cần thêm tiền tố vào định nghĩa lớp

quan trọng

Tùy chọn

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

2 cho phép bạn kiểm soát việc có nên đánh dấu các tiện ích của Tailwind bằng

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

3 hay không. Điều này có thể thực sự hữu ích khi sử dụng Tailwind với CSS hiện có có bộ chọn độ đặc hiệu cao

Để tạo các tiện ích dưới dạng

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

3, hãy đặt khóa

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

2 trong các tùy chọn cấu hình của bạn thành

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

6

npx tailwindcss init

1

Giờ đây, tất cả các lớp tiện ích của Tailwind sẽ được tạo dưới dạng

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

3

Điều này cũng áp dụng cho mọi tiện ích tùy chỉnh mà bạn xác định trong CSS của mình bằng cách sử dụng chỉ thị

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

8

Chiến lược lựa chọn

Đặt

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

2 thành

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

6 có thể gây ra một số vấn đề khi kết hợp các thư viện JS của bên thứ ba để thêm các kiểu nội tuyến vào các phần tử của bạn. Trong những trường hợp đó, các tiện ích

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

3 của Tailwind đánh bại các kiểu nội tuyến, có thể phá vỡ thiết kế dự định của bạn

Để giải quyết vấn đề này, thay vào đó, bạn có thể đặt

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

2 thành bộ chọn ID như

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwindcss-config.js' },
  },
}

3

Cấu hình này sẽ thêm tiền tố vào tất cả các tiện ích của bạn với bộ chọn đã cho, tăng tính đặc hiệu của chúng một cách hiệu quả mà không thực sự biến chúng thành

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

3

Sau khi bạn chỉ định bộ chọn

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

2, bạn sẽ cần đảm bảo rằng phần tử gốc của trang web của bạn khớp với bộ chọn đó. Sử dụng ví dụ trên, chúng ta cần đặt thuộc tính

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwindcss-config.js' },
  },
}

6 của phần tử gốc thành

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwindcss-config.js' },
  },
}

7 để các kiểu hoạt động bình thường

Sau khi cấu hình của bạn được thiết lập xong và phần tử gốc khớp với bộ chọn trong cấu hình Tailwind của bạn, tất cả các tiện ích của Tailwind sẽ có độ đặc hiệu đủ cao để đánh bại các lớp khác được sử dụng trong dự án của bạn mà không can thiệp vào các kiểu nội tuyến

Khi sử dụng chiến lược bộ chọn, hãy đảm bảo rằng tệp mẫu bao gồm bộ chọn gốc của bạn được đưa vào cấu hình nội dung của bạn, nếu không, tất cả CSS của bạn sẽ bị xóa khi xây dựng cho sản xuất

Công cụ sửa đổi quan trọng

Ngoài ra, bạn có thể làm cho bất kỳ tiện ích nào trở nên quan trọng bằng cách thêm ký tự

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwindcss-config.js' },
  },
}

8 vào đầu

npx tailwindcss init

2

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwindcss-config.js' },
  },
}

8 luôn ở đầu tên tiện ích, sau bất kỳ biến thể nào, nhưng trước bất kỳ tiền tố nào

npx tailwindcss init

3

Điều này có thể hữu ích trong những tình huống hiếm gặp khi bạn cần tăng tính cụ thể vì bạn đang phải đối mặt với một số phong cách mà bạn không kiểm soát được

phân cách

Tùy chọn

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

10 cho phép bạn tùy chỉnh ký tự nào sẽ được sử dụng để phân tách các công cụ sửa đổi (kích thước màn hình,

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

11,

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

12, v.v. ) từ tên tiện ích (

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

13,

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

14, v.v. )

Chúng tôi sử dụng dấu hai chấm theo mặc định (

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

15), nhưng có thể hữu ích khi thay đổi điều này nếu bạn đang sử dụng ngôn ngữ tạo khuôn mẫu như Pug không hỗ trợ các ký tự đặc biệt trong tên lớp

npx tailwindcss init

4

Plugin cốt lõi

Phần

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

16 cho phép bạn tắt hoàn toàn các lớp mà Tailwind thường tạo theo mặc định nếu bạn không cần chúng cho dự án của mình

Để tắt các plugin cốt lõi cụ thể, hãy cung cấp một đối tượng cho

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

16 để đặt các plugin đó thành

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

18

npx tailwindcss init

5

Nếu bạn muốn đưa vào danh sách an toàn những plugin cốt lõi nào sẽ được bật, hãy cung cấp một mảng bao gồm danh sách các plugin cốt lõi mà bạn muốn sử dụng

Nếu bạn muốn tắt tất cả plugin cốt lõi của Tailwind và chỉ cần sử dụng Tailwind làm công cụ để xử lý plugin tùy chỉnh của riêng mình, hãy cung cấp một mảng trống

npx tailwindcss init

6

Đây là danh sách mọi plugin cốt lõi để tham khảo

Core PluginDescription

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

19The

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

60 utilities like

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

61

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

62The

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

63 and

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

64 utilities

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

65The

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

66 utilities like

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

67

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

68The

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

69 utilities like

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

80

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

81The

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

82 utilities like

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

83

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

84The

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

84 utilities like

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

86

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

87The

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

87 utilities like

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

89

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

00The

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

01 utilities like

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

02

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

03The

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

04 utilities like

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

05

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

06The

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

07 utilities like

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

08

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

09The

npx tailwindcss init

00 utilities like

npx tailwindcss init

01

npx tailwindcss init

02The

npx tailwindcss init

03 utilities like

npx tailwindcss init

03

npx tailwindcss init

05The

Sử dụng nhiều cấu hình

Đối với các dự án cần tạo nhiều tệp CSS bằng cách sử dụng các cấu hình Tailwind khác nhau, hãy sử dụng lệnh

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

3 để chỉ định tệp cấu hình nào sẽ được sử dụng cho từng điểm nhập CSS

npx tailwindcss init

7

npx tailwindcss init

8

Tìm hiểu thêm về chỉ thị

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

3 trong tài liệu Chức năng & Chỉ thị

Tham chiếu trong JavaScript

Thường có thể hữu ích khi tham chiếu các giá trị cấu hình của bạn trong JavaScript phía máy khách của riêng bạn — ví dụ: để truy cập một số giá trị chủ đề của bạn khi áp dụng động các kiểu nội tuyến trong thành phần React hoặc Vue

Để làm cho việc này trở nên dễ dàng, Tailwind cung cấp một trình trợ giúp

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwindcss-config.js' },
  },
}

79 mà bạn có thể sử dụng để tạo phiên bản được hợp nhất hoàn toàn cho đối tượng cấu hình của mình

Lưu ý rằng điều này sẽ kéo theo nhiều phụ thuộc thời gian xây dựng của chúng tôi, dẫn đến kích thước gói phía máy khách lớn hơn. Để tránh điều này, chúng tôi khuyên bạn nên sử dụng một công cụ như babel-plugin-preval để tạo phiên bản tĩnh cho cấu hình của bạn tại thời điểm xây dựng

Các loại TypeScript

Chúng tôi cung cấp các loại TypeScript của bên thứ nhất cho tệp

npx tailwindcss init

9, cung cấp cho bạn tất cả các loại hỗ trợ IDE hữu ích và giúp bạn thực hiện các thay đổi đối với cấu hình của mình dễ dàng hơn rất nhiều mà không cần tham khảo nhiều tài liệu

Các tệp cấu hình được tạo bằng Tailwind CLI bao gồm chú thích loại cần thiết theo mặc định, nhưng để định cấu hình các loại TypeScript theo cách thủ công, chỉ cần thêm chú thích loại phía trên đối tượng cấu hình của bạn

programming css